Sass

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的功能，提供了更强大的工具和特性来编写更简洁、更易于维护的样式表。以下是 Sass 的一些主要特点和常用用法：

例子

继续介绍 Sass 的教程，以下是一些关键概念和用法：

1. 变量声明和使用：

   • 变量以$符号开头，后面紧跟变量名。
   • 声明变量的例子：$primary-color: #333;
   • 使用变量的例子：.my-class { color: $primary-color; }

2. 嵌套规则：

   Sass 允许将选择器嵌套在其他选择器内，以表示层级关系。

   • 嵌套例子：

     .parent {
       background: #fff;
       .child {
         color: #333;
       }
     }
     

   • 编译后生成的 CSS：

       .parent {
         background: #fff;
       }
       .parent .child {
         color: #333;
       }
     

3. Mixin（混入）：

   Mixin 是一种可重用的样式块，可以包含任何 CSS 代码。

   • 定义 Mixin 的例子：

     @mixin center-align {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
     }
     

   • 使用 Mixin 的例子：

     .my-element {
      @include center-align;
      width: 100px;
      height: 100px;
     }
     

4. 继承：

   继承允许一个选择器继承另一个选择器的所有样式。

   • 继承例子：

     .base-class {
      font-size: 16px;
      line-height: 1.5;
     }
     
     .child-class {
      @extend .base-class;
      color: #333;
     }
     

   • 编译后生成的 CSS：

     .base-class, .child-class {
      font-size: 16px;
      line-height: 1.5;
     }
     
     .child-class {
      color: #333;
     }
     

5. 颜色函数和运算符：

   Sass 提供了一系列内置的颜色函数，如lighten(), darken(), mix(), 等，用于操作颜色值。运算符包括算术运算符（+、-、*、/）、比较运算符（=、!=、>、<、>=、<=）和逻辑运算符（and、or、not）。

6. 导入文件：

   使用@import指令可以将多个 Sass 文件合并为一个 CSS 文件。导入文件例子：@import 'variables'; @import 'mixins';

7. 指令和控制结构：

   Sass 支持条件语句（@if, @else if, @else）、循环语句（@for, @each, @while）和函数定义（@function）。

8. 编译 Sass 文件：

   可以通过命令行工具（如sass或node-sass）、GUI 工具（如 Koala 或 Prepros）或编辑器插件（如 VS Code 的 Sass 插件）来编译 Sass 文件为 CSS 文件。

9. 函数：

   Sass 提供了一系列内置函数，也可以自定义函数。

   • 内置函数例子：计算颜色的饱和度和亮度

     $base-color: #ff0000;
     
     .my-element {
       color: saturate($base-color, 20%);
       background-color: lighten($base-color, 30%);
     }
     

   • 自定义函数例子：计算元素的百分比宽度

     @function percentage-width($value, $total) {
      @return ($value / $total) * 100%;
     }
     
     .my-element {
      width: percentage-width(800px, 1200px);
     }
     

10. 注释：
    Sass 支持单行和多行注释。

    • 单行注释例子：

      // 这是一个单行注释
      .my-class {
        color: red;
      }
      

    • 多行注释例子（生成 CSS 文档注释）：

      /*
       * 这是一个多行注释
       * 它会被转换为CSS文档注释
       */
      .my-class {
        color: red;
      }
      

11. 延迟加载（懒加载）：

    Sass 本身并不直接支持延迟加载，但可以通过一些构建工具或框架实现类似的功能。假设你正在使用 Gulp 作为构建工具，可以使用 gulp-sass 和 gulp-watch 插件来实现延迟加载：

    const gulp = require('gulp');
    const sass = require('gulp-sass');
    
    function compileSass() {
      return gulp
        .src('src/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
    }
    
    function watchSass() {
      watch('src/sass/**/*.scss', { ignoreInitial: false }, compileSass);
    }
    
    exports.default = watchSass;
    

    上述代码会监视src/sass目录下的所有 SCSS 文件，当这些文件发生变化时，只会编译更改过的文件，从而实现类似延迟加载的效果。