SCSS常用特性

一、嵌套

分为3种：选择器嵌套、属性嵌套、伪类嵌套。
scss允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

1.选择器嵌套

    nav {
      a {
        color: red;
        header & {//&：上一级选择器
          color:green;
        }
       }  
    }

2.属性嵌套

Scss 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3.伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。例如经典的“clearfix”：

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

二、变量

变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）

//普通变量
$fontSize: 12px;
body{
    font-size:$fontSize;
}

三、@mixin（混合）

可重用性高，可以注入任何东西，通过@include引用

1.声明不带参数的混合宏

//不带参数的混合宏
@mixin border-radius{
    border-radius: 5px;
}
//调用：
.box {
  @include border-radius;
}

2.声明一个没有默认值的带参混合宏

//无默认值的带参混合宏
@mixin border-radius($radius){
    border-radius: $radius;
}
//调用：
.box {
  @include border-radius(3px);
}

3.声明一个带默认值的带参混合宏

//带默认值
@mixin border-radius($radius:3px){
  border-radius: $radius;
}
//调用
.box {
  @include border-radius(50%);//或者@include border-radius;
}

4.多个参数的混合宏

//带多个参数（例如经典居中）
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
//调用
.box-center {
  @include center(500px,300px);
}

四.继承@extend

指继承类中的样式代码，通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

五.@function:函数功能

使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容

@function du($r) {
　　@return $r*2
}

.a8 {
　　　border: solid #{du(2)}px red;
}

六、引用父元素&

在编译时，&将被替换成父选择符（常用）

例子:
　　　　　　　a {
　　　　　　　　　　font-size: 20px;
　　　　　　　　　　text-decoration: none;
　　　　　　　　　　&:hover {
　　　　　　　　　　　　text-decoration: underline;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　编译后:
　　　　　　　　a {
　　　　　　　　　　font-size: 20px;
　　　　　　　　　　text-decoration: none;
　　　　　　　　　}
　　　　　　　　a:hover {
　　　　　　　　　　text-decoration: underline;
　　　　　　　　　}