SASS 常用功能：最全，最细，最小白

变量

变量声明

    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;

变量引用

    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

嵌套

1. 基础嵌套

css表现形式

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li{
    display: inline-block; 
}

scss 表现形式

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
            li {
                display: inline-block; 
               }
         }
}

2. 引用父级选择器"&"

①：css表现形式

 a {font-weight: bold;}
 a:hover {color: red;}

①：scss 表现形式

a {
    font-weight: bold;
    &:hover {color: red;}
  }

②：css表现形式

    #main {
          color: black;
     }
    #main-sidebar {
          border: 1px solid; 
      }

②：scss 表现形式二

    #main {
      color: black;
      &-sidebar { border: 1px solid; }
    }

3. 嵌套属性

css表现形式

.demo {
      font-family: fantasy;
      font-size: 30em;
      font-weight: bold; 
  }

scss 表现形式

.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

引入

把child.scss 文件导入 father.scss 中使用

// child.scss

html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// father.scss

@import './child';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

混合

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用， SASS目前使用@mixin name指令来进行混合操作。

//声明
@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

//引用
.box {
  @include border-radius(10px);
}

继承

//声明
    %message-common {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
//引用
    .message {
      @extend %message-common;
    }
    .success {
      @extend %message-common;
      border-color: green;
    }

注意：如果只声明了，没有继承，则声明代码不会被输出到最终生成的CSS文件；
举例：

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。

    %other-styles {
      display: flex;
      flex-wrap: wrap;
    }

算术运算符

引用scss 后可以直接在css中进行计算

.container { width: 100%; }

article {
  float: left;
  width: 600px / 960px * 100%;
}

aside {
  float: right;
  width: 300px / 960px * 100%;
}

如果对你有用，请点个赞哦(*￣︶￣)