[TOC] ### 1. Sass 介绍 --- Sass 是由 Ruby 语言编写的一款 CSS 预处理语言 Sass 官网的宣传标语：世界上最成熟、最稳定、最强大的专业级CSS扩展语言 它是一款强化 CSS 的辅助工具，是对 CSS 的扩展，扩展了嵌套、混合、继承、导入等高级功能，这些拓展令 CSS 更加强大优雅，可以更好的组织管理样式文件，从而更高效的开发项目 Sass 英文官网：<https://sass-lang.com> Sass 中文官网：<https://sass.bootcss.com> Sass 中文官网：<https://www.sass.hk> ### 2. Sass 变量 --- ##### 声明变量 Sass 变量的声明和 CSS 属性的声明很像，任何可以用作 CSS 属性值的赋值都可以用作 Sass 的变量值 ```sass color: #007aff; $uni-color-primary: #007aff; $basic-border: 1px solid black; $plain-font: "Myriad Pro" 、Myriad、 "Helvetica Neue"; ``` 与 CSS 属性不同，Sass 变量可以在 CSS 规则块定义之外存在。变量定义在 CSS 规则块内时，只能在此规则块内使用 ```sass $nav-color: #f90; nav { $width: 100px; width: $width; color: $nav-color; } ``` 变量名用中划线还是下划线分隔 ？ Sass 的变量名可以与 CSS 中的属性名和选择器名称相同，包括中划线和下划线。Sass 对这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。使用中划线的方式比较普遍，建议使用中划线 ```sass $link-color: blue; a { color: $link_color; } ``` ### 3. 嵌套 CSS --- ##### 嵌套选择器 在 CSS 中重复写选择器是非常烦人的 ```css #content article h1 { color: #333; } #content article p { margin-bottom: 1.4em; } #content aside { background-color: #eee; } ``` 使用 Sass 可以嵌套规则块，避免了重复书写，样式可读性更高 ```sass .container { div { font-weight: bold; } > div { font-size: 20px; } + div { background: red; } .left a { border: 1px solid green; &:hover { color: red; } } h1, h2, h3 { margin-bottom: 0.8em; } } ``` ##### 嵌套属性 除了 CSS 选择器，属性也可以进行嵌套 ``` nav { border: { style: solid; width: 1px; color: #ccc; } } nav { border-style: solid; border-width: 1px; border-color: #ccc; } ``` 甚至可以像下边这样嵌套 ``` nav { border: 1px solid #ccc { left: 0px; right: 0px; } } nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; } ``` ### 4. 导入 SASS 文件 --- CSS 有个不常用的属性，即 `@import` 规则，用于在一个 CSS 文件中导入其他 CSS 文件。然而，后果是只有执行到 `@import` 时，浏览器才会去下载其他 CSS 文件，这导致页面加载起来特别慢 SASS 也有一个 `@import` 规则，但不同的是，SASS 的 `@import` 在生成 CSS 文件时就把相关文件导入进来。意味着所有相关的样式都被归纳到了同一个 CSS 文件中，无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器都可以在导入文件中使用 SASS 的 `@import` 规则并不需要指明被导入文件的全名，可以省略 `.scss` 和 `.sass` 文件后缀  ##### 默认变量值 一般情况下，一个变量声明多次时，后面的值会将前面的值覆盖掉 ```sass $color: red; $color: blue; ``` 假如你写了一个可被别人 `@import` 导入的 SASS 文件，希望导入者可以定制修改该文件中的某些值，使用 `！default` 标签可以实现这个目的，含义是：如果这个变量被声明赋值了，就使用它声明的值，否则就用这个默认值 下面示例中，home.scss 中的 $color 变量的值为 blue ```sass // test.scss $color: red !default; // home.scss $color: blue; @import "test.scss"; div { border: 2px solid $color; } ``` ### 5. 静默注释 --- CSS 中的注释用于对样式的简单说明，但是，你可能并不希望每个浏览网站源码的人都能看到注释 SASS 提供了一种不同于 CSS 标准注释格式的 `/***/`的注释语法，也就是 **静默注释**，其内容不会出现在生成的 CSS 文件中。静默注释的语法和 JavaScript，PHP 等单行注释的语法相同，以 `//` 开头，注释内容直到行末 ``` /* CSS 注释 */ // SASS 静默注释 ``` ### 6. 混合器 --- 如果你的项目中有几个地方小小的样式类似（例如一致的字体和颜色），那么使用变量统一来处理这种情况是非常不错的选择 但是，当你的样式变得越来越复杂，需要大段大段的重用样式的代码，独立的变量就不能应付这种情况了，此时可以使用 **混合器** 实现大段样式的重用 ##### 混合器语法 混合器使用 `@mixin` 标识符定义，然后在样式表中使用 `@include` 来使用这个混合器 ```sass @mixin tag-style { font-size: 25px; border: 1px solid red; background-color: blue; } div { @include tag-style; text-align: center; } a { @include tag-style; float: left; } ``` 生成的 CSS ```css div { font-size: 25px; border: 1px solid red; background-color: blue; text-align: center; } a { font-size: 25px; border: 1px solid red; background-color: blue; float: left; } ``` ##### 何时使用混合器 首先，你要明白，利用混合器，可以很容易地在样式表的不同地方共享样式 如果你发现在不停的重复一段样式，那么就应该把这段样式构造成优良的混合器 混合器和 css 类很像，都是给一大段样式命名，所以在选择使用哪个的时候可能会产生迷惑。最重要的区别：类名是在 html 文件中用的，混合器是在样式表中用的，意味着类名具有语义化含义，混合器是展示性的描述 ##### 混合器传参 混合器并一定总得生成相同的样式 可以给混合器传参数，来定制混合器生成的样式，混合器被 `@include` 时，可以把它当作一个 CSS 函数来传参 默认参数值语法格式： ``` $name: 默认值 设置参数默认值示例： @mixin tag-style($size: 30px) {} ``` 混合器使用示例： ```sass @mixin tag-style($color, $size: 30px) { color: $color; font-size: $size; } div { @include tag-style(red, 15px); } span { @include tag-style(blue, 20px); } ``` ### 7. 继承样式 --- 选择器的继承：继承一个选择器定义的所有样式，通过 `@extend` 语法实现 ``` // 继承样式 .error { border: 1px solid red; } .seriousError { @extend .error; border-width: 3px; } // 生成的 CSS .error, .seriousError { border: 1px solid red; } .seriousError { border-width: 3px; } ```