sass介绍及嵌套规则<一>

介绍：

Sass (Syntactically Awesome StyleSheets) ，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目

语法格式：

创建的文件有两个扩展名， .sass 和 .scss ；扩展名不同，语法格式也不同
.scss 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
.sass 另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

特色功能：

完全兼容 CSS3
在CSS基础上增加变量，嵌套，混合等功能
通过函数进行颜色值与属性值得运算
提供控制指令（control directives）等高级功能
自定义输出格式

Sass开发Vscode中需要的插件：

sass
live sass complier

sass的嵌套规则：

1.选择器嵌套

注意：选择器嵌套不易过深！！！

html代码：

 <div class="box">
        <p>1212</p>
        <span>你好</span>
    </div>

sass代码：

SCSS

.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    p{
        color: red;
        font-size: 30px;
    }
    span{
        color: green;
        font-size: 30px;
    }
}

转换后css代码：

.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

.box p {
  color: red;
  font-size: 30px;
}

.box span {
  color: green;
  font-size: 30px;
}
/*# sourceMappingURL=01-sassdemo.css.map */

2.属性嵌套

凡是可以拆分的属性都可以使用属性嵌套，比如margin padding ; 使用属性嵌套时，有时需要借助于插值语法 #{ }

scss代码：

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    padding: {
        top: 100px;
        left: 50px;
    }
    margin: {
        top: 50px;
        left: 100px;
    }
    border: {
        top: 10px solid skyblue;
    }
}