Sass 是一种 CSS 预处理器，在 CSS 基础上提供了变量、嵌套、模块化、Mixin（混入）、运算和条件判断等功能，能够提高 CSS 的开发效率与可维护性。Sass 代码需要经过编译，最终转换为浏览器能够识别的普通 CSS。

Sass 环境搭建#

Sass 与 SCSS 的区别#

Sass 提供两种语法格式：推荐使用 SCSS，因为它与普通 CSS 的语法基本一致。

对比	SCSS	Sass
文件后缀	`.scss`	`.sass`
大括号 `{}`	需要	不需要
分号 `;`	需要	不需要
CSS 语法兼容性	兼容 CSS	使用缩进语法
推荐程度	推荐	较少使用

安装 Sass#

首先需要安装 Node.js，然后通过 npm 安装 Sass。

1
npm install -d sass

编译 SCSS 文件#

创建两个文件：

1
project/
2
├── index.html
3
├── style.scss
4
└── style.css

编写 style.scss：

1
$primary-color: #409eff;
2

3
.box {
4
  width: 200px;
5
  height: 200px;
6
  background-color: $primary-color;
7
}

执行编译：

1
npx sass style.scss style.css

生成的 style.css：

1
.box {
2
  width: 200px;
3
  height: 200px;
4
  background-color: #409eff;
5
}

在 HTML 中引入：

1
<link rel="stylesheet" href="./style.css" />

浏览器只能直接使用编译后的 CSS。

自动监听文件变化#

1
npx sass --watch style.scss:style.css

修改 SCSS 文件后，Sass 会自动重新编译 CSS。

如果需要监听整个目录：

1
npx sass --watch scss:css

将 scss 目录中的样式编译到 css 目录。

基本语法#

注释#

1
// 单行注释，不会输出到 CSS
2

3
/* 多行注释，通常会输出到非压缩 CSS */

基本嵌套#

普通 CSS：

1
.nav {
2
  background: #333;
3
}
4
.nav a {
5
  color: white;
6
}
7
.nav a:hover {
8
  color: red;
9
}

SCSS：

1
.nav {
2
  background: #333;
3
  a {
4
    color: white;
5
    &:hover {
6
      color: red;
7
    }
8
  }
9
}

其中 & 表示当前嵌套规则的父选择器。

父选择器 `&`#

1
.button {
2
  color: #333;
3

4
  &:hover {
5
    color: red;
6
  }
7

8
  &.active {
9
    color: blue;
10
  }
11

12
  &--primary {
13
    background: #409eff;
14
  }
15

16
  .icon {
17
    width: 20px;
18
  }
19
}

编译后的选择器：

SCSS	CSS
`&:hover`	`.button:hover`
`&.active`	`.button.active`
`&--primary`	`.button--primary`
`.icon`	`.button .icon`

属性嵌套#

SCSS 还支持对具有相同前缀的 CSS 属性进行嵌套。实际开发中，普通属性写法通常更直观，按需使用即可。

1
.box {
2
  font: {
3
    size: 16px;
4
    weight: bold;
5
    family: Arial;
6
  }
7

8
  margin: {
9
    top: 10px;
10
    bottom: 20px;
11
  }
12
}

编译后：

1
.box {
2
  font-size: 16px;
3
  font-weight: bold;
4
  font-family: Arial;
5
  margin-top: 10px;
6
  margin-bottom: 20px;
7
}

变量入门#

定义与使用变量#

Sass 使用 $ 定义变量。

1
$primary-color: #409eff;
2
$font-size: 16px;
3
$border-radius: 8px;
4

5
.button {
6
  background: $primary-color;
7
  font-size: $font-size;
8
  border-radius: $border-radius;
9
}

编译后：

1
.button {
2
  background: #409eff;
3
  font-size: 16px;
4
  border-radius: 8px;
5
}

变量适合统一管理项目中的颜色、字体大小、间距和圆角等属性。

变量作用域#

局部变量通常只在当前作用域内有效。

1
$color: red; // 全局变量
2
.box {
3
  $color: blue; // 局部变量
4

5
  color: $color;
6
}
7
.title {
8
  color: $color;
9
}

编译后：

1
.box {
2
  color: blue;
3
}
4
.title {
5
  color: red;
6
}

变量运算#

1
$width: 200px;
2
$gap: 20px;
3

4
.box {
5
  width: $width + $gap;
6
  padding: $gap * 2;
7
  margin: $gap - 5px;
8
}

编译后：

1
.box {
2
  width: 220px;
3
  padding: 40px;
4
  margin: 15px;
5
}

Sass 变量与 CSS 变量#

对比	Sass 变量	CSS 变量
声明	`$color: red;`	`--color: red;`
使用	`$color`	`var(--color)`
生效阶段	编译时	浏览器运行时
JS 动态修改	不支持直接修改	支持
主要用途	样式复用、编译配置	动态主题、实时样式变化

嵌套，代码拆分及引入#

当项目样式较多时，可以将 SCSS 拆分为多个文件，按照功能管理。

文件拆分#

1
project/
2
├── index.html
3
├── scss/
4
│   ├── _variables.scss
5
│   ├── _mixins.scss
6
│   ├── _reset.scss
7
│   ├── _index.scss
8
│   └── main.scss
9
└── css/
10
    └── main.css

以 _ 开头的 SCSS 文件称为 Partial（局部文件），一般作为模块供其他文件加载，不单独编译成 CSS。

@use 加载模块#

1
_variables.scss
2
$primary-color: #409eff;
3
$font-size: 16px;
4
main.scss
5
@use "variables";
6

7
.box {
8
  color: variables.$primary-color;
9
  font-size: variables.$font-size;
10
}

可以使用 as 定义别名：

1
@use "variables" as v;
2

3
.box {
4
  color: v.$primary-color;
5
}

也可以使用 as *，省略命名空间：

1
@use "variables" as *;
2

3
.box {
4
  color: $primary-color;
5
}

实际开发中推荐保留命名空间，避免不同模块之间出现命名冲突。

@forward 转发模块#

假设存在两个模块：

1
_variables.scss
2
$primary-color: #409eff;
3
_mixins.scss
4
@mixin flex-center {
5
  display: flex;
6
  justify-content: center;
7
  align-items: center;
8
}

可以通过 _index.scss 统一转发：

1
@forward "variables";
2
@forward "mixins";

然后在 main.scss 中使用：

1
@use "index" as s;
2

3
.box {
4
  color: s.$primary-color;
5
  @include s.flex-center;
6
}

@use、@forward 和 @import 的区别#

指令	功能	推荐情况
`@use`	加载模块并使用其成员	推荐
`@forward`	转发模块的公共成员	推荐
`@import`	旧式模块导入方式	已废弃

新项目应当使用 @use 和 @forward 管理 SCSS 模块。

Mixin混入的使用#

Mixin 用于定义可以重复使用的样式代码块，类似于函数，可以传递参数。

定义和调用 Mixin#

使用 @mixin 定义，使用 @include 调用。

1
@mixin flex-center {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.box {
8
  @include flex-center;
9
}
10

11
.container {
12
  @include flex-center;
13
}

编译后：

1
.box {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.container {
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
}

带参数的 Mixin#

1
@mixin flex-center($gap) {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  gap: $gap;
6
}
7

8
.box {
9
  @include flex-center(10px);
10
}
11

12
.container {
13
  @include flex-center(20px);
14
}

默认参数#

1
@mixin box-style(
2
  $color: #409eff,
3
  $radius: 8px
4
) {
5
  background: $color;
6
  border-radius: $radius;
7
}
8

9
.box1 {
10
  @include box-style;
11
}
12

13
.box2 {
14
  @include box-style(red, 12px);
15
}

也可以通过参数名指定传参：

1
.box3 {
2
  @include box-style($radius: 20px);
3
}

@content 插入样式代码块#

@content 是 Mixin 中的重要语法，表示接收并插入调用时传入的样式代码块。

1
@mixin hover {
2
  &:hover {
3
    @content;
4
  }
5
}
6

7
.button {
8
  color: #333;
9
  @include hover {
10
    color: red;
11
    background: #eee;
12
  }
13
}

编译后：

1
.button {
2
  color: #333;
3
}
4

5
.button:hover {
6
  color: red;
7
  background: #eee;
8
}

@content 常用于封装媒体查询、伪类等需要传入不同样式的场景。

媒体查询与Mixin 的配合使用#

使用 Mixin 可以将媒体查询中的断点统一封装，避免在多个地方重复编写断点。

普通媒体查询#

1
.container {
2
  width: 100%;
3
  padding: 10px;
4

5
  @media (min-width: 768px) {
6
    padding: 20px;
7
  }
8

9
  @media (min-width: 1200px) {
10
    padding: 30px;
11
  }
12
}

这种写法可以直接使用，但当项目中的媒体查询较多时，可以使用 Mixin 统一管理。

封装媒体查询 Mixin#

1
@mixin respond($device) {
2
  @if $device == tablet {
3
    @media (min-width: 768px) {
4
      @content;
5
    }
6
  } @else if $device == desktop {
7
    @media (min-width: 1200px) {
8
      @content;
9
    }
10
  }
11
}

核心语法：

语法	功能
`@mixin`	定义混入
`@include`	调用混入
`@if`	条件判断
`@else if`	多条件判断
`@content`	插入调用时传入的样式

使用媒体查询 Mixin#

1
@use "mixins" as m;
2

3
.container {
4
  width: 100%;
5
  padding: 10px;
6

7
  @include m.respond(tablet) {
8
    padding: 20px;
9
  }
10

11
  @include m.respond(desktop) {
12
    padding: 30px;
13
  }
14
}

编译后：

1
.container {
2
  width: 100%;
3
  padding: 10px;
4
}
5

6
@media (min-width: 768px) {
7
  .container {
8
    padding: 20px;
9
  }
10
}
11

12
@media (min-width: 1200px) {
13
  .container {
14
    padding: 30px;
15
  }
16
}

实际案例：响应式网格布局#

HTML：

1
<div class="card-list">
2
  <div class="card">卡片1</div>
3
  <div class="card">卡片2</div>
4
  <div class="card">卡片3</div>
5
  <div class="card">卡片4</div>
6
</div>

SCSS：

1
@use "mixins" as m;
2

3
.card-list {
4
  display: grid;
5
  grid-template-columns: 1fr;
6
  gap: 16px;
7

8
  // 平板：两列
9
  @include m.respond(tablet) {
10
    grid-template-columns: repeat(2, 1fr);
11
  }
12

13
  // 桌面：四列
14
  @include m.respond(desktop) {
15
    grid-template-columns: repeat(4, 1fr);
16
  }
17
}
18

19
.card {
20
  padding: 20px;
21
  color: white;
22
  background: #409eff;
23
  border-radius: 8px;
24
  text-align: center;
25
}

音乐

音乐

Sass 环境搭建#

Sass 与 SCSS 的区别#

安装 Sass#

编译 SCSS 文件#

自动监听文件变化#

基本语法#

注释#

基本嵌套#

父选择器 `&`#

属性嵌套#

变量入门#

定义与使用变量#

变量作用域#

变量运算#

Sass 变量与 CSS 变量#

嵌套，代码拆分及引入#

文件拆分#

@use 加载模块#

@forward 转发模块#

@use、@forward 和 @import 的区别#

Mixin混入的使用#

定义和调用 Mixin#

带参数的 Mixin#

默认参数#

@content 插入样式代码块#

媒体查询与Mixin 的配合使用#

普通媒体查询#

封装媒体查询 Mixin#

使用媒体查询 Mixin#

实际案例：响应式网格布局#

文章分享

评论区

音乐

sass基础语法

Sass 环境搭建#

Sass 与 SCSS 的区别#

安装 Sass#

编译 SCSS 文件#

自动监听文件变化#

基本语法#

注释#

基本嵌套#

父选择器 &#

属性嵌套#

变量入门#

定义与使用变量#

变量作用域#

变量运算#

Sass 变量与 CSS 变量#

嵌套，代码拆分及引入#

文件拆分#

@use 加载模块#

@forward 转发模块#

@use、@forward 和 @import 的区别#

Mixin混入的使用#

定义和调用 Mixin#

带参数的 Mixin#

默认参数#

@content 插入样式代码块#

媒体查询与Mixin 的配合使用#

普通媒体查询#

封装媒体查询 Mixin#

使用媒体查询 Mixin#

实际案例：响应式网格布局#

文章分享

评论区

父选择器 `&`#