Sass预处理器常用功能（OneLine周分享）

写作背景

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

什么是Sass

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

1.变量

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

$color-red: #FF617F;

body:{
    color:$color-red;
}

2.嵌套

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

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li { 
    display: inline-block; 
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
  }
}

输出

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav ul li {
  display: inline-block; }
nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

3.混入

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

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.container {
    @include clearfix;
}

通过@include调用

.container {
    @include clearfix;
}

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

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}

使用

  button--success {
    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
  }
  button--warning {
    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
  }
  button--danger {
    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
  }

4.@content

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

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译后

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

5.Maps的函数

map-get($map,$key) 函数的作用是根据$key 参数，返回$key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。使用场景如下：

$color: (
  title: #383D47,
  content: #4A505E,
  tip: #9AB0C6,
  error: #FF617F,
  warning: #FFBD3C
);

.button {
  color: map-get($color, title)
}

编译结果：

.button {
  color: #383D47
}

总结

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