前端Sass样式预处理器详解

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。通过编译预处理生成CSS。

入门使用，目前以vscode作为编辑器进行Sass操作详解。

官网文档位置：https://sass-lang.com/documentation

一、预备环境

1. 安装插件，Live Sass Compiler。

2. 插件扩展配置

3. 进入配置文件，选中在setting.json中编辑。

4. 配置文件模板

{
    "workbench.colorTheme": "Default High Contrast",
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
        //以下部分为正式上线环境中，启用压缩格式css
        // {
        //     "format": "compressed",
        //     "extensionName": ".min.css",
        //     "savePath": "~/../css"
        // }
    ],
    "liveSassCompile.settings.autoprefix": [    
        "> 1%",
        "last 2 versions",
    ],
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ]
}

5. 右下角可以看到sass实时编译已经启动

二、语法功能拓展

1. 选择器嵌套

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  .header{
    height: 50px;
    background-color: aqua;
    .logo{
      width: 100px;
      padding: 5px 10px;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container .header {
  height: 50px;
  background-color: aqua;
}
.container .header .logo {
  width: 100px;
  padding: 5px 10px;
}/*# sourceMappingURL=demo.css.map */

2. 父选择器&

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  a{
    text-decoration: none;
    color: gray;
    &:hover{
      color: #ff0;
    }
  }
  .left{
    border:1px solid black;
    &-top{
      float:left;
      width: 100px;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container a {
  text-decoration: none;
  color: gray;
}
.container a:hover {
  color: #ff0;
}
.container .left {
  border: 1px solid black;
}
.container .left-top {
  float: left;
  width: 100px;
}/*# sourceMappingURL=demo.css.map */

3. 属性嵌套

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  a{
    text-decoration: none;
    color: gray;
    //属性名冒号后必须有空格
    font: {
      size : #ff0;
      family:sans-serif;
      weight:bold;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container a {
  text-decoration: none;
  color: gray;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}/*# sourceMappingURL=demo.css.map */

4. 占位符选择器%

占位符%配合@extend实现相同的样式复用。

scss:

.container%base {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  text-decoration: none;
  line-height: 1.428;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}
.container-top{
  @extend %base;
  color:#333;
  background-color: #fff;
}

生成css:

.container.container-top {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
  text-decoration: none;
  line-height: 1.428;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}

.container-top {
  color: #333;
  background-color: #fff;
}/*# sourceMappingURL=demo.css.map */

5. 注释

在SASS中有两种注释格式，一种是单行注释//，该注释在SASS中只能注释单行，编译成css后不显示。另一种是/* ... */，该注释在SASS中可以注释多行内容，编译成css后仍然显示该注释内容。

三、变量

1. 变量的声明$

注意：-与_表示在变量中表示的内容一致。

scss:

$width:1200px;
$border-color:white;
//$border-color与$border_color相同，都会编译成$border-color
$border_color:red;
.container {
  width: $width;
  border-color: $border-color;
}

生成css:

.container {
  width: 1200px;
  border-color: red;
}/*# sourceMappingURL=demo.css.map */

2. 变量的作用域

（1）局部作用域：在选择器内容里面定义的变量，只能在选择器范围内使用。

scss:

.container {
  $width:1200px;
  width: $width;
  p{
    width: $width;
  }
}

生成的css

.container {
  width: 1200px;
}
.container p {
  width: 1200px;
}/*# sourceMappingURL=demo.css.map */

（2）全局作用域:定义后全局使用的变量。

• 第一种：在选择器的外面的最前面定义的变量。

scss:

$width:1200px;
.container {
  width: $width;
  p{
    width: $width;
  }
}

生成的css

.container {
  width: 1200px;
}
.container p {
  width: 1200px;
}/*# sourc