Sass语法（1）

1.变量

在Sass中可以定义变量，变量以$开头+变量名，使用冒号(:)来为变量赋值（相当于传统的=号）。字符串不需要引号。

$red: #132132;　
　　boby {
　　　background-color : $red;
　　}

可以为变量定义后面添加 !default来设置默认变量。

/* blue覆盖red */
$color: bule;
$color: red !default;
body {
    color: $color;
    border: 1px solid $color;
}

按照常规的覆盖方案，似乎用不着设置默认变量，只需要把被覆盖的变量放在上方，如下所示。

/* blue覆盖red */
$color: red;
$color: bule;
body {
    color: $color;
    border: 1px solid $color;
}

但是如果是为局部变量设置默认变量那就不一样，代码如下所示。

/* blue覆盖red */
$color: bule;
body {
    $color: red !default;
    color: $color;
    border: 1px solid $color;
}

当然这样的技巧还有很多。

还可以把变量嵌入sass任何地方中，从而动态调整属性。格式为#{$变量名}。

$side:top; 
div { 
    border-#{$side}-radius:10px;
}

2.嵌套

Sass 的嵌套分为三种：

• 选择器嵌套
• 属性嵌套
• 伪类嵌套

在sass选择器嵌套中，可以在内部使用&字符代替当前选择器，具体效果如下。

scss文件：

nav {
    a {
        color: red;

        header & {
            color:green;
        }
    }
}
css效果：

nav a {
  color:red;
}

header nav a {
  color:green;
}

在sass属性嵌套中，可以把属性前缀名拆开来设置属性，具体效果如下

scss文件：

/* 注意，border后面必须加上冒号。 */
.box {
    border: {
       top: 1px solid red;
       bottom: 1px solid green;
    }
}
css效果：

.box {
  border-top: 1px solid red;
  border-bottom: 1px solid green;
}
伪类嵌套和属性嵌套非常类似，也需要借助&符号一起配合使用
scss文件：

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }

css效果：

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

3.计算

在sass中可以使用常规的+（加）、-（减）、*（乘）、/（除）、%（求模）。在运算中，操作符的优先级和常规编程语法一样：

1.括号优先级最高
2.乘法，除法优先于加法，减法

加法必须要单位相同，或者只为其中一边添加单位。减法也同理。

h2 {
    font-size:5px + 2em;  //错误！！！编译报错
    font-size:5px + 2;    //7px
    font-size:5 - 2px;    //3px
}

p {
  color: #010203 + #040506;  // 颜色也可以做加法运算
}

乘法和加减法有所不同，在乘法中其中一个因数是倍数，所以只能有一个因数带单位，如下所示。

body {
    font-size: 30 * 1.1px;  // 33px
    font-size: 30px * 1.1;  // 33px
    font-size: 30px * 1.1px;  // 报错 
}

p {
  color: #010203 * 2;  // 颜色也可以做乘法运算
}

除法与乘法不同，除法符号/，在css某些属性的简写下，是可以直接书写的。
比如：
font: 16px/24px Arial;
由于这样的css属性，所以sass重载了该符号，不能直接当除法使用。

所以在如在以下情况，是不做除法运算的。

nav {
    //不执行除法操作
   margin:16px / 24px;

    //使用变量嵌入，不执行除法操作
    $base-size: 18px;
    $line-height: 10px;
    font-size: #{$base-size} / #{$line-height};
}

在如下情况是做除法运算的，但是和乘法不同，允许被除数和除数都带相同单位。

//使用括号之后，执行除法操作，结果为2，而不是2px
font-size: (10px / 5px);

//若除法结果不带单位，可以加上一个带单位的数，结果为5em。
font-size: (10px / 5px) + 3em;  

//使用变量，执行除法操作，结果为2，而不是2px
$base-size: 10px;
$line-height: 5px;
font-size: $base-size / $line-height;

//使用算术操作符，执行除法操作
 font-size: 2px / 4px + 3px;

而且和乘法不一样的是，被除数是必须带单位，除数则根据需要可带单位，或者不带单位（被除数 / 除数 = 商）。具体效果如下所示：

.box {
     margin:(10px / 5);  // 结果为2px，有单位

     margin:(10px / 5px);  // 结果为2，无单位

     margin:(10 / 5);  //结果为2，和上面等价
      
     margin:(10 / 5px);  //报错  
}

4.注释

在sass中有两种注释，一种是编译后注释内容会被忽略，另一种情况是编译后注释内容会保存。

// （编译后被省略）

/* （保留到编译后） */

5.混合宏@mixin

• 混合宏是一个可以复用的代码块，定义好之后可在其他代码块中调用。类似一个方法。

无参数混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏，调用一个宏命令为@include mixinName。如：

/* 定义宏命令 */
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.nav { 
    @include border-radius;  // 调用宏命令
}

border-radius是混合宏的名称。

带参数混合宏
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：

@mixin box($radius: 5px, $margin: 1px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
    margin: $margin;
}
.nav{ 
    @include box(10px, 5px);  // 调用宏命令
    @include box($margin: 5px);  // 只为margin传值，radius使用默认值
}

若调用时不传参数，则默认为redius=5px，margin=1px。

多值的混合宏：
有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代。

@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.nav {
  @include box-shadow(0 2px 2px rgba(0,0,0,.3), 
                      0 3px 3px rgba(0,0,0,.3),
                      0 4px 4px rgba(0,0,0,.3));
}

6.继承

• 在 Sass 中也可以继承，可以继承类中的样式代码块。在 Sass中通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

.line {
  border: 1px solid #eee;
  font-size: 16px;
}
.h2 {
  background-color: yellow;
  @extend .line;
}
.h3 {
  background-color: red;
  @extend .line;
}

7.占位符

占位符是解决了早期继承中代码冗余的情况（不过现在的sass版本，继承已经没有这个问题了，但调用混合宏会有代码冗余）。什么叫代码冗余？早期继承会产生这样的问题，css无法成解析成组选择器。占位符格式为%name，name必须以字母或下划线开头。以上面代码为例，早期不用占位符来继承解析出来的css如下。

/* -----------.scss文件--------------- */
.line {
  border: 1px solid #eee;
  font-size: 16px;
}
.h2 {
  background-color: yellow;
  @extend .line;
}
.h3 {
  background-color: red;
  @extend .line;
}

/* -----------.css文件--------------- */
.line {
  border: 1px solid #eee;
  font-size: 16px;
}
.h2 {
  background-color: yellow;
  border: 1px solid #eee;
  font-size: 16px;
}
.h3 {
  background-color: red;
  border: 1px solid #eee;
  font-size: 16px;
}

如果使用占位符，代码相对简洁，同时父类不会编译出来，不用考虑到父类编译出来对整个样式的影响。这样就可以通过占位符的相互继承关系，在样式中调用。代码如下所示：

/* -----------.scss文件--------------- */
%line {
  border: 1px solid #eee;
  font-size: 16px;
}
.h2 {
  background-color: yellow;
  @extend %line;
}
.h3 {
  background-color: red;
  @extend %line;
}

/* -----------.css文件--------------- */
.h2, .h3 {
  border: 1px solid #eee;
  font-size: 16px;
}
.h2 {
  background-color: yellow;
}
.h3 {
  background-color: red;
}

在对基类继承、占位继承、混合宏调用的使用的场合要把握好。

结语
以上是sass的基础部分，到这里就结束了，sass的细节问题还需要大家在掌握基础的层次上深入学习。接下来会在学习的过程中继续更新Sass语法（2）

原文链接：https://www.jianshu.com/p/368859f69f8c