Sass 快速开始

官网: https://sass-lang.com/

它是一个 样式预处理器. Sass 与 CSS 的关系, 逻辑上与 TypeScript 和 JavaScript 的关系是一样的.

安装 (非官方)

安装的方式推荐有两种:

  • 安装 VSCode 插件, 保存 scss 文件时, 自动生成 css 与对应的 map 文件.
  • 使用 node 安装 sass, 即可使用命令行来处理 sass.

Sass 的实现有多个版本, Node 版本与 Dart 版本的支持似乎是一致的.

实际上使用有两种情况:

  • 伴随 bundle 工具
  • 伴随 Vue 等脚手架工具

所以实际上这个安装主要用于学习阶段.

VSCode 插件

个人习惯使用 Live Sass Compiler:

image-20230712104523825

其使用方法是:

  1. 在编辑器下方的状态栏右侧, 有一个 监视 Sass 的按钮
  2. 点击该按钮后, 会启用文件监视. 在编辑 sass, scss 等文件后, 会立即生成对应的 CSS 文件, 与 map 文件.

image-20230712104911897

命令行

使用命令:

npm i -g sass

image-20230712105030111

使用 sass 命令也可以监视文件生成对应 css.

可以使用 sass -h 来查询帮助.

快速学习 (官方)

主要包括下面几个主题:

  1. 预处理
  2. 变量
  3. 嵌套
  4. 部分化
  5. 模块
  6. 混入
  7. 集成
  8. 运算

1. 预处理

介绍了 sass 命令的用法, 基本可以忽略.

主要介绍了 生成文件的配置, 以及 --watch 选项的使用.

sass --watch input.scss output.css

也可以指定文件夹, 用冒号分隔

sass --watch app/sass:public/stylesheets

Sass 有两种文件格式

  • scss 格式, 表达层级使用花括号, 后缀名用 .scss
  • sass 格式, 表达层级使用缩进 (如 python), 后缀名用 .sass

2. 变量

Sass 中可以定义变量:

$变量名: 值

3. 嵌套

嵌套花括号后, 即会生成后代选择器 (注意非子代)

4. 部分化 partial

所谓的部分化, 可以简单的理解为 Sass 语法的模块化, 片段化. 即将 Sass 语句放在不同的文件中的处理做法.

约定: 文件名用下划线 (_) 开头.

如此在生成 css 的时候, 部分化的 sass 不会单独生成 css 文件, 编辑器知道它是用于导入的 Sass 模块.

5. 模块化

可以将 sass 语句按照不同规则 (变量, mixins, 函数等) 放在不同的文件中, 构成模块.

然后使用 @use 来导入模块.

模块默认采用文件名作为命名空间.

逻辑上, 导入模块后相当于将模块中的表征样式的 Sass 代码混入到新文件中.

声明的样式表会合并进来, 但如变量等内容需要手动的指定.

约定:

  1. 模块文件使用 下划线作为前缀, 基本模型如 "_文件名.scss".
  2. 导入使用 @use '文件名' 的语法来导入模块, 导入时不带下划线, 并可不用后缀, 直接使用名字, 并且该名字即为命名空间, 成员用点访问.

6. 混入 Mixins

混入是一个 对象, 可以视为一个样式表模板. 专门用于复用某个样式表片段.

使用步骤:

  1. 使用关键字 @mixin 语法来定义一个样式表片段. 它需要一个名字, 或许还可以带上参数.
  2. 在需要使用样式表的地方, 使用 @include 混入的名字, 如果有参数: @include 混入的名字($参数名)

会直接将样式替换 整个 @include 表达式.

语法描述:

@mixin 名字 ($参数: 默认值) {
    ... 
    样式属性: 样式值;
}

@include 名字

7. 扩展与继承

@extend 的逻辑也是一种样式表的复用形式. 其作用是将选择器与样式关联起来.

逻辑上 混入有点值传递, 扩展有种引用传递的感觉.

  1. 首先使用语法 %名字 来定义一组样式表, 用花括号括起来.
  2. 在需要使用该样式的选择器下使用 @extend %名字.
  3. 那么就会生成要选择器使用该样式表的 CSS 部分.

逻辑上是, 用 % 定义需要复用的样式表模块. 再用 @extend 来确定什么选择器需要作用该样式表.

8. 运算

Sass 预处理器的内置模块中提供了数学模块, 可以进行简单的数学运算

使用步骤:

  1. 使用 @use "sass:math" 导入数学模块
  2. 即可在代码中使用 +, -, *, math.dev(被除数, 除数), 以及 %.
Last Updated:
Contributors: jk