Sass预处理器常用功能

写作背景

最近在合作开发一个项目，使用到Sass预处理器，觉得Sass在对于项目中的开发还是挺有用的，所以想分享给大家，希望对大家在实际项目开发中有所帮助。

什么是Sass

简单来说，Sass（Syntactically Awesome Style Sheets）是对CSS（层叠样式表）的语法的一种扩充，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代 码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。接下来我将会介绍一些我们实际开发中Sass常用到的功能。

1.变量

变量是Sass中最常用到的功能，我们通常会定义一些可复用的css属性，比如颜色、字体大小等。通过$符号声明变量，在使用的地方直接引入变量即可。

2.嵌套

不知道大家在写css样式的时候有没有遇到这样一个问题，在父选择器下面新增一个子选择器，避免与其他选择器的样式发生冲突，我们一般都需要在写子选择器样式的时候将父选择器嵌在前面，这虽然避免了样式的冲突，但是书写起来比较麻烦，特别是一些嵌套比较深的选择器，前面往往需要嵌很长的父选择器，Sass的嵌套功能很好的解决了这个问题。

输出

3.混入

混合（Mixin）是通过申明一个函数，在函数内你可以添加任何你想重复使用的样式,通过传参来改变样式的内容。下面我来介绍一下Mixin的一些使用。

通过@include调用

我们还可以通过传参来设置Mixin里面的样式，比如实现element-ui的button组件样式，我们可以根据不同的button类型来改变button的颜色、边框、背景等。

使用

4.@content

用在里面的，当定义一个后，并且设置了； 的时候可以传入相应的内容到里面。

编译后

5.Maps的函数

函数的作用是根据 参数，返回 在 中对应的 值。如果 不存在 中，将返回 值。使用场景如下：

编译结果：

总结

以上就是我开发中使用Sass中使用频率比较高的功能，熟练使用能提高我们的开发速率和代码可维护性，希望我的分享对大家能带来一些帮助。