Sass中的变量以及选择器嵌套规则

Sass中的变量以及选择器嵌套规则

变量

• 变量名以$符号开头，后面跟:，然后写属性值，且值可以对应css中的规则，允许使用空格分割多个值。

  $border: 1px solid red;
  div {
      border: $border;/*相当于border：1px solid red */
  }
  

• 变量名中可以使用中划线-或者下划线_，且两个符号可以混合使用，编译后会被解析为同一个符号。防止出错应当注意变量名保持一致，不要混合使用。

  $border_a: 1px solid red;
  div {
      border: $border-a;/*若没有$border-a变量则会被解析为$border_a*/
  }
  

• 一个变量中可以嵌套使用其他变量。

  $color: red;
  $border: 1px solid $color;

• 变量可以声明在{}外部，此时为全局变量，可以在任何地方使用，若是在某个{}内部声明，则仅可以在该{}内部使用，不可以在其他位置使用。

选择器嵌套规则

对于css中的子代及兄弟选择器。如：

div1 div2 {}//后代选择器
div1 > div2 {}//子代选择器
div+div2 {}//相邻兄弟选择器
div~div2 {}//所有兄弟选择器

在sass中可以使用如下方式简化：

div1 {//后代选择器
    div2 {
    }
}
div1 {//子代选择器
    >div2 { /*此处> 可以是+ ~*/
    }
}

这种简化方式不可以作用于伪类，此时可以使用父选择器标识符&来解决.

父选择器标识符&

当需要使用伪类选择器的时候，以下方式是错误的：

a {
    color: red;
    :hover {
        color: yellow;
    }
}

此时可以使用&来指代父级选择器：

a {
      color: yellow;
      &:hover {
        color: red;
      }
   }

有时针对不同浏览器可能对body标签添加不同样式，此时也可以使用&实现：

此时当body标签拥有class="ie"时:hover才会生效。

a {
      color: yellow;
      body.ie &:hover {
        color: red;
      }
   }

属性嵌套规则

对于css中的含有-的属性名，利如background-color、background-image等，在sass中也可以嵌套书写：此时通过-来断开属性名，且-前面的根名字后要加上:再写{}，括号内为-后面的名字

background: {
      color: red
};