Sass初探：嵌套只是开始，解锁Sass更多功能

文章目录

[1. 安装Sass](#1. 安装Sass)
[2. Sass编译成CSS](#2. Sass编译成CSS)
[3. 设置编译后的CSS格式](#3. 设置编译后的CSS格式)
[4. Sass和Scss有什么区别？](#4. Sass和Scss有什么区别？)
[5. Sass变量的使用](#5. Sass变量的使用)
[6. 选择器嵌套写法](#6. 选择器嵌套写法)
[7. Mixin(混合)](#7. Mixin(混合))
[8. extend(继承)](#8. extend(继承))
[9. Sass中的模块化(@import)](#9. Sass中的模块化(@import))
[10. Sass中的模块化(@use)](#10. Sass中的模块化(@use))

1. 安装Sass

要安装 Sass，你可以根据你的开发环境选择合适的方式。以下是几种常见的安装方法：

通过 npm 安装

如果你使用 Node.js 和 npm，可以通过以下命令全局安装 Sass：
bash 复制代码
```
npm install -g sass
```
通过 yarn 安装

如果你偏好使用 Yarn，可以执行：
bash 复制代码
```
yarn global add sass
```
全局安装 Sass

如果你偏好使用 pnpm，可以执行：
bash 复制代码
```
pnpm add -g sass
```
作为项目依赖安装

如果你希望将 Sass 仅作为特定项目的开发依赖，可以在项目目录下执行：
bash 复制代码
```
pnpm add -D sass
```

安装完成后，你可以通过命令行使用 Sass，或者在构建工具中配置 Sass 的使用。如果你使用的是像 Webpack 这样的模块打包工具，可能还需要安装额外的 loader 来处理 .scss 或 .sass 文件。

验证安装

为了确保 Sass 已正确安装，你可以运行以下命令来检查 Sass 版本：

bash 复制代码

sass --version

如果安装成功，你应该会看到 Sass 的版本号输出。

2. Sass编译成CSS

新建如下目录，在style.scss文件中写一点css

css 复制代码

.card {
  width: 100%;
  color: blue;
  font-size: 14px;
  font-weight: 500;
}

执行命令：

bash 复制代码

sass sass/style.scss:css/style.css

则会将sass编译后的css输出到css/style.css文件中,如下图所示：

监视文件变化
sass --watch 是一个用于监视 Sass 文件更改并自动编译为 CSS 的命令。

命令格式：

bash 复制代码

sass --watch [输入文件或目录]:[输出文件或目录]

示例：
- 监视单个文件：
  bash 复制代码
```
sass --watch input.scss:output.css
```
- 监视整个目录：
  bash 复制代码
```
sass --watch scss:css
```

当监视之后，当指定的 .scss 或 .sass 文件发生更改时，Sass 编译器会自动重新编译这些文件，并将生成的 CSS 文件保存到指定的输出路径。

这样可以避免手动编译，提高开发效率。

3. 设置编译后的CSS格式

默认输出样式（nested）
这是默认的输出样式，嵌套结构与 Sass 文件中的嵌套相似。

css 复制代码

.card {
  width: 100%;
  color: blue;
  font-size: 14px; }

.card .title {
  color: #333;
  font-family: "Courier New", Courier, monospace; }

Expanded 样式
使用 --style expanded 选项，输出格式为扩展样式，每条规则占一行，但仍然保持缩进。

bash 复制代码

sass -w sass:css -s  expanded

生成的 CSS 如下：

css 复制代码

.card {
  width: 100%;
  color: blue;
  font-size: 14px;
}

.card .title {
  color: #333;
  font-family: "Courier New", Courier, monospace;
}

Compact 样式
使用 --style compact 选项，输出格式为紧凑样式，每个选择器和声明块在一行内。

bash 复制代码

sass -w sass:css -s  compact

生成的 CSS 如下：

css 复制代码

.card { width: 100%; color: blue; font-size: 14px; }
.card .title { color: #333; font-family: "Courier New", Courier, monospace; }

Compressed 样式
使用 --style compressed 选项，输出格式为压缩样式，所有内容合并为一行，去除不必要的空格和换行。

bash 复制代码

sass -w sass:css -s compressed

生成的 CSS 如下：

css 复制代码

.card{width:100%;color:blue;font-size:14px}.card .title{color:#333;font-family:"Courier New",Courier,monospace}

总结：

默认：nested 样式，适合开发时查看。
Expanded：每条规则占一行，适合调试。
Compact：每个选择器和声明块在一行内，减少文件大小。
Compressed：最小化文件大小，适合生产环境。

4. Sass和Scss有什么区别？

Sass 和 SCSS 是 Sass（Syntactically Awesome Style Sheets）的两种不同的语法格式。它们的主要区别在于语法结构和书写方式，但编译后的输出都是标准的 CSS。以下是它们的主要区别：

语法格式

Sass (缩进语法)
- 文件扩展名：.sass
- 使用缩进来表示嵌套关系，不需要大括号 {} 和分号 ;。
- 更简洁，适合喜欢 Python 或 Haml 风格的人。
示例：
sass 复制代码
```
.card
  width: 100%
  color: blue
  font-size: 14px

  .title
    color: #333
    font-family: "Courier New", Courier, monospace
```
SCSS (Sassy CSS)
- 文件扩展名：.scss
- 类似于标准的 CSS 语法，使用大括号 {} 和分号 ;。
- 更接近传统的 CSS 写法，容易上手，适合从 CSS 迁移过来的开发者。
示例：
scss 复制代码
```
.card {
  width: 100%;
  color: blue;
  font-size: 14px;

  .title {
    color: #333;
    font-family: "Courier New", Courier, monospace;
  }
}
```

兼容性

SCSS ：完全兼容 CSS 语法，可以直接将现有的 CSS 文件重命名为 .scss 并继续使用，无需修改内容。
Sass：不兼容 CSS 语法，需要转换为缩进格式，不能直接使用标准的 CSS 语法。

社区支持和工具链

SCSS：由于其与 CSS 的相似性，SCSS 更广泛使用，社区支持更好，大多数现代工具链（如 Webpack、Gulp 等）默认支持 SCSS。
Sass：虽然功能相同，但由于语法差异，使用较少，某些工具可能需要额外配置才能支持。

选择建议

如果你是新手或从 CSS 迁移过来，推荐使用 SCSS，因为它更直观且易于理解。
如果你喜欢简洁的缩进语法，并且愿意接受一些学习成本，可以选择 Sass。

总结

Sass：缩进语法，无大括号和分号，简洁但不兼容 CSS。
SCSS：类似 CSS 的语法，兼容 CSS，更容易上手和维护。

5. Sass变量的使用

css 复制代码

$primary-color: #333;
$primary-border: 1px solid $primary-color;
$primary-background: #f5f5f5;

.card {
  width: 200px;
  height: 200px;
  font-size: 14px;
  color: $primary-color;
  border: $primary-border;
  background-color: $primary-background;
}

6. 选择器嵌套写法

结构嵌套

html 复制代码

<nav>
  <ul>
    <li class="item active">
      <a href="#">首页</a>
    </li>
    <li class="item">
      <a href="#">关于</a>
    </li>
  </ul>
</nav>

css 复制代码

nav {
  background: #f5f5f5;
  ul {
    li {
      a {
        &:hover {
          color: blue;
        }
      }
      &.item {
        color: #333;
      }

      &.active {
        a {
          color: red;
        }
      }
    }
  }
}

属性嵌套
嵌套前，这些属性都有共同的部分font

css 复制代码

body {
  font-size: 14px;
  font-weight: 400;
  font-family: "Courier New", Courier, monospace;
}

嵌套后：

css 复制代码

body {
  font: {
    font-size: 14px;
    font-weight: 400;
    font-family: "Courier New", Courier, monospace;
  }
}

输出：

7. Mixin(混合)

Sass 中的 @mixin 是一种非常强大的功能，它允许你定义一组样式规则，并在多个地方复用这些规则。这不仅提高了代码的可维护性，还减少了重复代码。

定义和使用 @mixin

定义 @mixin

使用 @mixin 关键字定义一个 mixin，后面跟上 mixin 的名称和括号（即使没有参数也需包含括号）。可以在括号中传递参数，以增强灵活性。

示例：

scss 复制代码

@mixin font-settings($size, $weight, $family) {
  font-size: $size;
  font-weight: $weight;
  font-family: $family;
}

使用 @include

使用 @include 关键字来应用 mixin。可以传递参数值给 mixin，使其更具动态性。

示例：

scss 复制代码

body {
  @include font-settings(14px, 400, "Courier New", Courier, monospace);
}

带默认参数的 @mixin

你可以为 mixin 的参数设置默认值，这样在调用时可以选择性地传递参数。

示例：

scss 复制代码

@mixin font-settings($size: 16px, $weight: 400, $family: "Arial", sans-serif) {
  font-size: $size;
  font-weight: $weight;
  font-family: $family;
}

body {
  @include font-settings(14px, 400, "Courier New", Courier, monospace);
}

h1 {
  @include font-settings($size: 24px, $weight: bold);
}

带可变参数的 @mixin

有时你可能需要传递不定数量的参数。可以使用 $args... 语法来实现。

示例：

scss 复制代码

@mixin font-settings($size, $weight, $family...) {
  font-size: $size;
  font-weight: $weight;
  font-family: $family;
}

body {
  @include font-settings(14px, 400, "Courier New", Courier, monospace);
}

带条件逻辑的 @mixin

可以在 mixin 内部使用条件语句（如 @if、@else）来根据传入的参数执行不同的逻辑。

示例：

scss 复制代码

@mixin font-settings($size, $weight, $family, $line-height: null) {
  font-size: $size;
  font-weight: $weight;
  font-family: $family;

  @if $line-height {
    line-height: $line-height;
  }
}

body {
  @include font-settings(14px, 400, "Courier New", Courier, monospace, 1.5);
}

p {
  @include font-settings(16px, 400, "Arial", sans-serif);
}

结合选择器嵌套使用 @mixin

你可以在嵌套的选择器中使用 mixin，以保持代码结构清晰。

示例：

scss 复制代码

@mixin font-settings($size, $weight, $family) {
  font-size: $size;
  font-weight: $weight;
  font-family: $family;
}

nav {
  ul {
    li {
      a {
        @include font-settings(14px, 400, "Courier New", Courier, monospace);

        &:hover {
          color: purple;
        }
      }

      &.item {
        background-color: red;
      }
    }
  }
}

应用多个mixin

html 复制代码

 <nav>
      <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
        <li><a href="#">导航6</a></li>
      </ul>
    </nav>

css 复制代码

@mixin flex-settings($flex-direction, $flex-wrap, $justify-content, $align-items, $gap: 0) {
  display: flex;
  flex-direction: $flex-direction;
  flex-wrap: $flex-wrap;
  justify-content: $justify-content;
  align-items: $align-items;

  @if $gap != 0 {
    gap: $gap;
  }
}

@mixin font-settings($font-size: 16px, $font-weight: 400, $font-family...) {
  font: {
    size: $font-size;
    weight: $font-weight;
    family: $font-family;
  }
}
nav {
  width: 400px;
  ul {
    width: 100%;
    @include flex-settings(column, nowrap, space-between, center, 30px);
    li {
      list-style: none;
      // 去除下划线
      a {
        display: block;
        text-decoration: none;
        @include font-settings(16px, 700, "微软雅黑", Arial);
      }
    }
  }
}

输出的CSS:

css 复制代码

@charset "UTF-8";
nav {
  width: 400px;
}
nav ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
nav ul li {
  list-style: none;
}
nav ul li a {
  display: block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  font-family: "微软雅黑", Arial;
}

/*# sourceMappingURL=style.css.map */

总结

定义 @mixin ：使用 @mixin 关键字定义一组可复用的样式规则。
使用 @include ：通过 @include 关键字应用 mixin。
参数化：可以通过传递参数使 mixin 更具灵活性。
默认参数：为 mixin 参数设置默认值，简化调用。
条件逻辑：在 mixin 内部使用条件语句实现更复杂的逻辑。
选择器嵌套：在嵌套选择器中使用 mixin 保持代码结构清晰。

8. extend(继承)

在 Sass 中，@extend 指令用于将一个选择器的样式继承到另一个选择器中。这可以帮助你避免重复代码，并且可以使样式表更加模块化和易于维护。

基本用法

@extend 允许一个选择器继承另一个选择器的所有样式规则。目标选择器必须在样式表中已经定义。

示例：

scss 复制代码

.card1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  a {
    font-weight: 700;
    color: white;
  }
}

.card2 {
  @extend .card1;
  background-color: red;
  font-size: 30px;
}

编译后的 CSS：

css 复制代码

.card1, .card2 {
  width: 300px;
  height: 300px;
  background-color: blue;
}

.card1 a, .card2 a {
  font-weight: 700;
  color: white;
}

.card2 {
  background-color: red;
  font-size: 30px;
}

注意事项

目标选择器必须存在 ：@extend 的目标选择器（如 .card1）必须在样式表中已经定义，否则会报错。
避免不必要的继承 ：过度使用 @extend 可能会导致生成的 CSS 文件变得庞大且难以维护。确保只在必要时使用。
选择器合并 ：@extend 会将继承的选择器合并在一起，这有助于减少重复的样式规则。

使用 !optional 关键字

如果你不确定目标选择器是否存在，可以使用 !optional 关键字来避免编译错误。

示例：

scss 复制代码

.card2 {
  @extend .card1 !optional;
  background-color: red;
  font-size: 30px;
}

嵌套选择器中的 @extend

你可以在嵌套选择器中使用 @extend，以保持代码结构清晰。

示例：

scss 复制代码

.card1 {
  width: 300px;
  height: 300px;
  background-color: blue;

  a {
    font-weight: 700;
    color: white;
  }
}

.card2 {
  @extend .card1;

  background-color: red;
  font-size: 30px;

  a {
    color: yellow;
  }
}

编译后的 CSS：

css 复制代码

.card1, .card2 {
  width: 300px;
  height: 300px;
  background-color: blue;
}

.card1 a, .card2 a {
  font-weight: 700;
  color: white;
}

.card2 {
  background-color: red;
  font-size: 30px;
}

.card2 a {
  color: yellow;
}

避免样式冲突

确保继承的选择器不会导致样式冲突。例如，.card2 中的 background-color 会覆盖 .card1 中的 background-color。

示例：

scss 复制代码

.card1 {
  width: 300px;
  height: 300px;
  background-color: blue;

  a {
    font-weight: 700;
    color: white;
  }
}

.card2 {
  @extend .card1;
  background-color: red;
  font-size: 30px;
}

编译后的 CSS：

css 复制代码

.card1, .card2 {
  width: 300px;
  height: 300px;
  background-color: blue;
}

.card1 a, .card2 a {
  font-weight: 700;
  color: white;
}

.card2 {
  background-color: red;
  font-size: 30px;
}

总结

基本用法 ：使用 @extend 将一个选择器的样式继承到另一个选择器中。
注意事项：确保目标选择器存在，避免不必要的继承，注意选择器合并。
!optional 关键字 ：使用 !optional 避免目标选择器不存在时的编译错误。
嵌套选择器 ：可以在嵌套选择器中使用 @extend，保持代码结构清晰。
避免冲突：确保继承的选择器不会导致样式冲突。

9. Sass中的模块化(@import)

我们都知道，在CSS中也存在@import指令，在说明Sass中的模块化之前，需要对两个关键概念有所了解，即编译时和运行时。

编译时（Compile Time）

编译时是指在代码被实际运行之前，通过编译器或预处理器将源代码转换为目标代码的过程。对于 Sass 文件，编译时是指将 .scss 文件转换为 .css 文件的过程。

特点：

静态处理：编译时处理的是静态代码，不涉及实际的运行环境。
优化性能：编译器可以进行各种优化，如合并文件、压缩代码等。
错误检测：编译时可以检测和报告语法错误和其他问题。
资源合并：可以将多个文件合并成一个文件，减少 HTTP 请求。

运行时（Run Time）

运行时是指代码在实际运行环境中执行的时间点。对于前端开发，运行时通常是指浏览器加载和执行 HTML、CSS 和 JavaScript 文件的时间。

特点：

动态处理：运行时处理的是动态内容，涉及实际的用户交互和环境变化。
性能影响：运行时的性能直接影响用户体验。
资源加载：浏览器需要加载和解析所有依赖的资源文件。
错误处理：运行时错误通常需要通过浏览器的开发者工具进行调试。

注意：当前项目的目录结构如下，以下说明都会基于这个目录结构说明。

CSS中的模块化：

css 复制代码

@import url("../base/index.css");
// 或者
// @import "../base/index.css";
.container {
  background-color: black;
}

.card1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  a {
    font-weight: 700;
    color: white;
  }
}

.card2 {
  @extend .card1;
  background-color: red;
  font-size: 30px;
}

编译后的结果：

运行后的结果：

这里说明，CSSd的模块化在编译时并不会将引入的css文件合并成一个css文件，在运行时在浏览器额外发起了http请求。这会增加页面加载时间，尤其是在网络条件较差的情况下。

Sass中的模块化：

css 复制代码

// scss文件不用写扩展名
@import "../base/index";

.container {
  background-color: black;
}

.card1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  a {
    font-weight: 700;
    color: white;
  }
}

.card2 {
  @extend .card1;
  background-color: red;
  font-size: 30px;
}

编译后的结果：

运行后的结果：

这里说明，Sass的模块化在编译时会将css合并到一个文件中，不会导致额外的http请求。

注意点：

不要在scss文件中通过CSS的语法@import url()引入scss文件，例如@import url("./_reset.scss");。此时会在编译时将该导入语句原样输出，不会报错，但是在浏览器中运行时会报错，因为浏览器不认识scss语法。

10. Sass中的模块化(@use)

Sass中的@import指令会存在以下三个问题：

混淆：由于css中也存在@import指令，而在css中的@import是运行时的，sass中的@import是编译时的；使用时还需要区分这两者的区别，增加了心智负担。
污染：@import导入的变量会污染全局。
没有自己的私有变量。

@use的用法：

css 复制代码

@use "variables" as vars; // 这里默认的命名空间是variables， 重新设置命名空间为vars

.button {
	color: vars.$primary-color; // 使用模块中定义的变量
}

$-radius: 3px; // 设置模块的私有成员 - 或 _ 都可以