SASS 和 SCSS 扩展 CSS

前言

css 是对 html 网页的外形进行控制的定义语言。但 css 定义上有比较大的重复性，所以有人创造了扩展版 css，通过预编译起，可以将扩展css 转换为原始的css，但是又可以使用更高层次的语法。

这就是 SASS。 SCSS 是 SASS 的新版本语法。旧版采用缩进方式，而新版采用花括号方式，注意他们的工具还是称为 SASS。

scss 和 css 大体上很类似，但 scss 对前缀有优化，避免对统一前缀的多个对象重复书写前缀。具体看选择器章节。

安装方法

cd 项目
yarn add --dev sass

语法

变量

格式：

1. $变量名: 变量值 ：定义变量
2. $变量名 ：使用变量

变量定义在转换的时候是会消失。除非你在文档某处使用它。它的值会被替换上去。

变量是有定义范围的，如果在某一个层级定义，它只能在该层级和内层使用。

选择器

嵌套

css 通过选择器来定义标签的样式，选择器有五大类：

1. 标签名，如<h1> 中的 h1
2. 类名，如<h2 class="ariticle"> 中的 .ariticle
   1. 类名可以有多个，如.aaa 和 .bbb，组合起来表示同时具备两者： .aaa.bbb
   2. p.aaa 表示 p 标签中类名是 aaa 的组合
   3. p .aaa 表示 p 标签内层类名是 aaa 的组合
3. id名，如<h3 id="content">中的 #content
4. 属性名， 如<h4 data-x="aaa"> 中 [data-x]
   1. [data-x="aaa"] : 匹配指定值
5. 补充类（不能单独用），如 a:hover 表示鼠标停留在 a 标签链接上时的效果。

如何表示层次关系呢？即某个标签内的标签的样式呢？通过组合选择器：

/* 表示标签 id 为 content 的内层有个标签class 为 ariticle 的标签的内层 <h1> 的样式为红色*/
/* 例： <div id="content"><div class="ariticle"><h1>红色样式... */
#cotent .ariticle h1 {color:red}
#cotent .ariticle h2 {color:blue}

这看上去很简洁，但是同一层次的 h2{color:blue} 又要重复写一遍前缀。这种累赘的描述方式，就是 scss 想改进的地方：

#content{
    .ariticle{
        h1 {color:red}
        h2 {color:blue}
    }
}

不仅简洁，关键易读。

父选择器标识

#content{
    a{
        &:hover {color:red}
    }
    .ie & {color:blue}
}

产生：

#content a:hover {color:red}
.ie #content {color:blue}

& 就是父选择器的占位符，改变默认生成 css 的方式。（默认类似 a{b{c}} --> a b c）。

群组选择器

css 表示对一组选择器使用样式：

h1, h2 {color:red}
/* 等价于 */
h1 {color:red}
h2 {color:red}

scss 同样支持这个语法。并且支持嵌套：

#content{
    h1,h2 {color:red}
}
/* 等价于 */ 
#content h1, #content h2 {color:red}

组合选择器

css 支持选择器组合的方式：

1. > : 表示子层邻接的选择器
2. + ： 同层邻接的选择器
3. ~ ： 同层后续选择器

即对应一下关系：

<div>
    <span>子层邻接</span>
<div>
<div> 同层邻接(也是同层后续) </div>
<div> 同层后续 </div>

scss 同样支持在嵌套中使用该语法：

div {
    + div {color:red}
    ~ div {font-size:20px}
    > div {color:blue}
    span >{
        h1 {color:red}
        h2 {color:blue}
    }
}

产生：

div + div {color:red}
div ~ div {font-size:20px}
div > div {color:blue}
div span > h1 {color:red}
div span > h2 {color:blue}

属性嵌套

css 有很多属性是嵌套定义的：

div {
    border-style:solid;
    border-width:1px;
    border-color:red;
}

scss 支持这类属性改写成嵌套模式：

div {
    border: {
        style:solid;
        width:1px;
        color:red;
    }
}

稍微简化了书写。

导入样式文件

将样式分隔到不同文件，这些是工程做法。

1. 不需要写全文件名
2. 文件名有下划线前缀，表示让编译器不要产生对应的 css 文件。
3. 通过默认变量让外部修改变量值
4. 导入可以在某个范围内，产生嵌套组合器的效果

@import "colors"; /* 导入colors.scss */
@import "themes/night-sky"; /* 导入 themes/_night-sky.scss */
$aaa:red !default; /* 默认变量，当没有被定义时为 red */
.bule-theme {
    @import "blue"; /* 内容会导入和父级而产生嵌套组合 */
}

mixin 混合器

mixin 将内容倒腾到指定位置，和导入样式文件有点类似，但它是片段。

1. 支持参数
   1. 参数支持默认值
   2. 参数支持命名调用，也支持顺序调用
2. 支持插槽 @content
3. @include 简写 +
4. @mixin 简写 =

@mixin redfont($size:12) {
    color: red;
    @content;
    font-size: $size px;
}

div {
    @include redfont($size:20) { background-color:black};
    border: 2px solid blue;
}

产生：

div {
    color: red;
    background-color: black;
    font-size: 20px;
    border: 2px solid blue;
}

继承

导入文件，mixin 混入，都是不错的重用方式，但是编程语言界有个大杀器，那就是继承。scss 做到了。

1. 继承父类的自身
2. 继承父类的组合

.father {color:red}
.father a {color:blue}
.son {
    @extend .father; /* 继承父类的所有 */
    font-size:20px;
}

类似效果：

.father {color:red}
.father a {color:blue}
.son {
    color:red;
    font-size:20px;
}
.son a {color:blue}

即将.father 出现的地方，添加相同的.son:

.father, .son {color:red}
.father a, .son a {color:blue}
.son {font-size:20px}

高级用法：

1. 继承来自标签的样式： @extend a
2. 继承来自组合的样式: @extend .aaa.bbb 等于继承：
   1. .aaa.bbb 组合自身
   2. h1.aaa.bbb 组合的扩展
   3. 而不会是局部，如 .aaa 或 .bbb
3. 组合继承样式： (#aaa .bbb) @extend .x，只有完全匹配组合#aaa .bbb 才继承样式，#aaa 和 .bbb 不会受影响。(不建议使用，因为会产生很多组合)，如对于 p a .x {}样式，编译器会生成：
   1. p a #aaa .bbb {}
   2. #aaa p a .bbb {}
4. 不支持继承自此类组合：@extend (#aaa .bbb)

纯继承

类似编程语言中的接口，或者虚类，它本身不会产生代码，除非有继承者。

使用占位符 % 来定义：

a%parent {color:red}
.notice { @extend %parent }

编译为：

a.notice {color:red}

运算

数据类型：

1. 数字： 1，2，10px
2. 字符串： "bar"，baz，'foo'
3. 颜色： blue, #04a3f9, rgba(255,0,0,0.5)
4. 空： null
5. 列表（list）：1.5em 3em 0 或者 1.5em, 3em, 0
6. 字典（map）：(key1:value, key2:value)
7. 其他css 属性：视为字符串

算式：

1. +、-、*、/、% ： 用于数字
   1. / 除法注意可能被识别为分隔字符，确保是除法意义，可以用括号
   2. / 除法希望作为分隔符，可以这样写： #{$a}/#{123}
2. <、>、<=、>= ： 用于数字
3. ==、!= ： 用于所有类型
4. #{"aaa"} : 将 "aaa" 编译为不带引号的字符串 aaa
5. 嵌套数组：交替使用逗号和空格区分，或者用小括号
   1. 1 2,3 4 : (1 2) (3 4)
6. +： 字符串相连，根据左侧决定是否带引号
7. "hello #{1+$a}": 可内嵌在字符串中的表达式
8. and or not : 布尔运算
9. & : 引用父选择器
10. !default : 默认值， $a:'msg' !default
11. @import : 导入文件
    1. _file.scss : 带下划线前导的视为部分文件（即不独立编译为css文件）
    2. 嵌套导入，样式也会被嵌套
12. @media : 嵌套自动添加 and
13. @extend： 继承
    1. %：纯继承选择器占位符
    2. !optional： 可选
    3. 不可以继承 @media 嵌套外的选择器
14. @at-root : 在外层生成选择器
    1. @at-root(without:指令)： 用在指令嵌套中排除，如@media
15. @debug: 调试输出
    1. @warn:警告
    2. @error: 报错
16. @if @else if @else : 条件选择
17. @for $i from 1 through 3: 循环
18. @each $item in puma: 枚举
19. @while $i > 0: 循环
20. @mixin: 混入
21. @function： 函数

参考

1. 官方 : https://www.sass.hk/guide/