前端架构师技术之Sass

古城微笑少年丶 2023-10-16 14:24 11阅读 0赞

### 1 CSS 缺点 ###

CSS 仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，也不可以引用。CSS 主要有以下缺点。

*  CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
 *  CSS 需要书写大量看似没有逻辑的代码，代码冗余度是比较高的。
 *  CSS 没有很好的计算能力。
 *  不方便维护及扩展，不利于复用。

### 2 什么是 Sass ###

为了解决 CSS 在实际开发过程中存在的问题，我们可以使用 Sass（CSS预处理器） 来实现页面的样式。

*  Sass 是一款成熟、稳定、强大的专业级 CSS 扩展语言。
 *  它是一款强化 CSS 的辅助工具。
 *  在 CSS 语法的基础上增加了变量（variables）、嵌套（nestedrules）、混合（mixins）、导入（inline imports）等高级功能，让 CSS 更加强大与优雅。
 *  使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
 *  Sass 完全兼容所有版本的 CSS。

总的来说就是：**写更少的代码，实现更多的样式。**

### 3 Sass 编译 ###

*  [Sass在线编译工具][Sass] 使用工具进行编译
 *  VScode 下载安装 Easy Sass 插件，进行自动编译
 *  VScode 下载安装 Live Sass Compilerv 插件，进行自动编译

// Live Sass 配置
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "liveSassCompile.settings.excludeList": [
        "**",
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.formats": [
        {
        
            "format": "compressed",
            // "format": "expanded",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ]

### 4 Sass 基本用法 ###

#### 4.1 Sass 语法格式 ####

*  一种是最早的 Sass 语法格式，被称为缩进格式（Indented Sass），通常简称“Sass”，是一种简化格式。这种格式以“.sass”作为扩展名。（不再推荐使用）
 *  另一种语法格式是SCSS（SassyCSS），这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。这种格式以“.scss”作为扩展名。（目前使用）

#### 4.2 Sass 变量 ####

**Sass 使用“$”符号来标识变量**，如 $highlight-color 和 $sidebar-width。

Sass 变量的声明和 CSS 属性的声明比较相似。

$color: #F90;

任何可以用作 CSS 属性值的赋值都可以用作 Sass 的变量值，甚至是以空格或逗号分割多个属性值。

$basic-border: 1px solid black;
    $plain-font: "Myriad Pro", "Myriad", "Helvetica", "Neue", "Helvetica";

在变量定义完成之后，这时变量还没有生效，除非引用这个变量。

凡是 CSS 属性的标准值（如 1px 或者 bold）可存在的地方，变量就可以使用。

CSS生成时，变量会被它们的值所替代。之后，如果需要一个不同的值，只需要改变这个变量的值，那么所有引用此变量的地方生成的值都会随之改变。

$color: #F90;
    .selected {
      border: 1px solid $color;
    }

**特殊变量：如果变量需要镶嵌在字符串之中，就必须需要写在 \#\{\} 之中。**

$side: left;
    .rounded {
        border-#{$side}-radius: 5px;
    }

#### 4.3 Sass 运算 ####

Sass 支持数字的加（+）、减（-）、乘（\*）、除（/）和取余（%）等运算，如果必要时会在不同单位间进行值的转换，例如，将 1in + 8pt 转换为 1.111in（pt 全称为 point，是一个自然界的长度单位，1in=72pt。根据此公式 1in+8pt 转换后的结果为 1.111in）。

// 编译前
    p {
        width: 1in + 8pt;
    }
    // 编译后
    p {
        width: 1.111in; 
    }

“/”符号在 CSS 中通常起到分隔数字的用途，而在 Sass 中同时也赋予了“/”除法运算的功能，但两者并不会冲突。

也就是说，如果“/”在 Sass 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

// 编译前
    p {
        font: 10px/8px;
        $width: 1000px;
        width: $width/2;
        height: (500px/2); 
        margin-left: 5px + 8px/2px; 
    }
    // 编译后
    p {
        font: 10px/8px;
        width: 500px;
        height: 250px;
        margin-left: 9px; 
    }

编译使用了 “/” 运算符号的代码，font 编译后的结果不变，这是因为没有被圆括号包裹。

如果需要使用变量，同时又要确保 “/” 符号不做除法运算而是完整地编译到 CSS 文件中，只需要用 \#\{\} 插值语句将变量包裹。

p {
        $font-size: 12px;
        $line-height: 30px;
        font: #{$font-size}/#{$line-height};
    }

*  正常值用 “/” 运算，需要用圆括号包裹
 *  变量值不用 “/” 运算，需要用 \#\{\} 插值语句将变量包裹

#### 4.4 Sass 嵌套 ####

Sass 基于变量提供了更为强大的工具，即规则嵌套。

只有当 Sass 变量与规则嵌套一起使用时，才能发挥其更大的作用。

在使用 CSS 编写代码时，我们知道重复写选择器是非常烦琐的。

例如，要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个 ID 或 类名 来实现。

#content article h1 {
         color: #333 }
    #content article p {
         margin-bottom: 1.4em }
    #content aside {
         background-color: #eee }
    
    .box article h1 {
         color: #333 }
    .box article p {
         margin-bottom: 1.4em }
    .box aside {
         background-color: #eee }

Sass 在编译输出 CSS 时会自动把这些嵌套规则处理好，避免代码的重复书写，且使样式的可读性更高。Sass 可以只写一遍来实现。

#content {
        article {
            h1 { color: #333 }
            p { margin-bottom: 1.4em }
        }
        aside { background-color: #eee }
    }
    .box {
        article {
            h1 { color: #333 }
            p { margin-bottom: 1.4em }
        }
        aside { background-color: #eee }
    }

属性也可以嵌套，比如 border-color 属性，可以写成

// 编译前
    .box {
        border: {
            color: red;
        }
    }
    // 编译后
    .box {
        border-color: red;
    }

> 注意：嵌套属性（border）后面必须加上冒号。

在嵌套的代码块内，可以使用 & 引用父元素。比如 :hover 伪类，可以写成

// 编译前
    .box {
        &:hover { color: red; }
    }
    // 编译后
    .box:hover {
        color: red;
    }

#### 4.4 Sass 注释 ####

Sass 有两种注释风格

*  单行注释 `// 注释` 只保留在 Sass 源文件中，不会保留在编译后的文件中。
 *  标准 CSS 注释 `/* 注释 */`， 会保留到编译后的文件中，压缩则删除。
    
     *  在标准注释后面加入一个感叹号，`/*! 重要注释 */` 表示重要注释，压缩模式也会保留注释，用于版权声明等。

### 5 代码的重用 ###

#### 5.1 Sass 继承 ####

Sass 中，继承可以让一个选择器继承另一个选择器的所有样式，继承使用 @extend 命令。

// 编译前
    .alert{
        padding: 15px;
    }
    
    .alert a{
        text-decoration: none;
    }
    
    .alert-info{
        @extend .alert;
        background-color: lightblue;
    }
    // 编译后
    .alert, .alert-info {
      padding: 15px;
    }
    
    .alert a, .alert-info a {
      text-decoration: none;
    }
    
    .alert-info {
      background-color: lightblue;
    }

**使用占位符选择器 %**，从 Sass 3.2.0 后，就可以定义占位选择器 %，这个的优势在于，不调用不会有多余的 CSS 文件。

// 编译前
    %h1 {
        font-size:20px;
    }
    div {
        @extend %h1;
        color:red;
    }
    // 编译后
    div {
        font-size:20px;
        color:red;
    }

#### 5.2 混合(Mixin) ####

Mixin 是可以重用的代码块。

*  使用 @mixin 命令，定义一个代码块。
 *  使用 @include 命令，调用这个mixin。

@mixin alert {
        color:#ccc;
        background-color:red;
    }
    div {
        @include alert;
    }

Mxin 的强大之处，在于可以指定参数和缺省值，使用的时候，根据需要加入参数。

@mixin alert($color:red) {
        color:#ccc;
        background-color:$color;
    }
    div {
        @include alert(blue);
    }

可以用 Mixin 来生成浏览器前缀。

// 设置关键帧
    @mixin keyframes($name) {
        @-webkit-keyframes #{$name} {
            @content;
        }
        @-moz-keyframes #{$name} {
            @content;
        }
        @-o-keyframes #{$name} {
            @content;
        }
        @keyframes #{$name} {
            @content;
        }
    }
    // 引入
    @include keyframes(scale) {
        100% {
            transform: scale(0.8);
        }
    }
    // css编译后
    @-webkit-keyframes scale {
        100% {
            transform: scale(0.8);
        }
    }
    @-moz-keyframes scale {
        100% {
            transform: scale(0.8);
        }
    }
    @-o-keyframes scale {
        100% {
            transform: scale(0.8);
        }
    }
    @keyframes scale {
        100% {
            transform: scale(0.8);
        }
    }

@mixin rounded($attr, $value) {
        #{$attr}: $value;
        -moz-#{$attr}: $value;
        -webkit-#{$attr}: $value;
    }
    #navbar li {
        @include rounded(border-radius, 8px);
    }

#### 5.3 颜色函数 ####

Sass 提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
    darken(#cc3, 10%) // #a3a329
    grayscale(#cc3) // #808080
    complement(#cc3) // #33c

#### 5.4 插入文件 ####

使用 @import 命令引入外部文件， 引入后，可使用外部文件中的变量等。

@import "base.scss";

如果插入的是 `.css` 文件，则等同于 CSS 的 import 命令。

@import "base.css";

### 6 高级用法 ###

#### 6.1 条件语句 ####

@if 可以用来判断，配套的还有 @else 命令

// Sass样式
    $type: monster;
    div {
        @if $type == ocean {
            color: blue;
        } @else if $type == matador {
            color: red;
        } @else if $type == monster {
            color: green;
        } @else {
            color: black;
        }
    }
    // css编译后样式
    div {
        color: green;
    }

\*\*三目判断：\*\*语法为 if($condition, $if\_true, $if\_false)

三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px
    if(false, 1px, 2px) => 2px
    
    $box: red;
    $fontSize: if($box==red, 16px, 14px);
    .box {
        font-size: $fontSize;
    }

#### 6.2 循环语句 ####

for 循环，有两种形式，分别为：

*  `@for $var from <start> through <end>`
 *  `@for $var from <start> to <end>`

$var 表示变量，start 表示开始值，end 表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

@for $i from 1 to 10 {
        .border-#{$i} {
            border: #{$i}px solid blue;
        }
    }

while 循环

$i: 6;
    @while $i > 0 {
        .item-#{$i} {
            width: 2em * $i;
        }
        $i: $i - 2;
    }

each 命令，作用与 for 类似

*  语法为 `@each $var in <list or map>`。
 *  其中 $var 表示变量

@each $member in a, b, c, d {
        .#{$member} {
            background-image: url("/image/#{$member}.jpg");
        }
    }

#### 6.3 自定义函数 ####

Sass 允许用户编写自己的函数，以 @function 开始，用 @return 返回值。

// 常规用法
    @function double($n) {
        @return $n * 2;
    }
    #sidebar {
        width: double(5px);
    }
    
    // 常用用法
    $fontSize: 100px;
    @function pxTorem($px) {
        @return $px / $fontSize * 1rem;
    }
    div {
        font-size: pxTorem(24px);
    }
    // css编译后样式
    div {
        font-size: .24rem;
    }

### 7 练习作业 ###

*  使用 Sass 语法优化移动端样式表

[Sass]: https://www.sassmeister.com/