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

1. 安装Sass

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

• 通过 npm 安装

  如果你使用 Node.js 和 npm，可以通过以下命令全局安装 Sass：

  npm install -g sass
  

• 通过 yarn 安装

  如果你偏好使用 Yarn，可以执行：

  yarn global add sass
  

• 全局安装 Sass

  如果你偏好使用 pnpm，可以执行：

  pnpm add -g sass
  

• 作为项目依赖安装

  如果你希望将 Sass 仅作为特定项目的开发依赖，可以在项目目录下执行：

  pnpm add -D sass
  

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

验证安装

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

sass --version

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

2. Sass编译成CSS

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

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

执行命令：

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

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

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

• 命令格式：

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

• 示例：

  • 监视单个文件：

    sass --watch input.scss:output.css
    

  • 监视整个目录：

    sass --watch scss:css
    

当监视之后，当指定的 .scss 或 .sass 文件发生更改时，Sass 编译器会自动重新编译这些文件，并将生成的 CSS 文件保存到指定的输出路径。
这样可以避免手动编译，提高开发效率。

3. 设置编译后的CSS格式

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

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

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

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

sass -w sass:css -s  expanded

生成的 CSS 如下：

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

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

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

sass -w sass:css -s  compact

生成的 CSS 如下：

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

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

sass -w sass:css -s compressed

生成的 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。以下是它们的主要区别：

1. 语法格式

• Sass (缩进语法)

  • 文件扩展名：.sass
  • 使用缩进来表示嵌套关系，不需要大括号 {} 和分号 ;。
  • 更简洁，适合喜欢 Python 或 Haml 风格的人。

  示例：

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

• SCSS (Sassy CSS)

  • 文件扩展名：.scss
  • 类似于标准的 CSS 语法，使用大括号 {} 和分号 ;。
  • 更接近传统的 CSS 写法，容易上手，适合从 CSS 迁移过来的开发者。

  示例：

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

2. 兼容性

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

3. 社区支持和工具链

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

4. 选择建议

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

总结

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

5. Sass变量的使用

$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. 选择器嵌套写法

1. 结构嵌套

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

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

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

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

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

嵌套后：

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

输出：

7. Mixin(混合)

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

1. 定义和使用 @mixin

定义 @mixin

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

示例：

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

使用 @include

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

示例：

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

2. 带默认参数的 @mixin

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

示例：

@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);
}

3. 带可变参数的 @mixin

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

示例：

@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);
}

4. 带条件逻辑的 @mixin

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

示例：

@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);
}

5. 结合选择器嵌套使用 @mixin

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

示例：

@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;
      }
    }
  }
}

6. 应用多个mixin

 <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>

@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:

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

1. 基本用法

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

示例：

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

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

编译后的 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;
}

2. 注意事项

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

3. 使用 !optional 关键字

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

示例：

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

4. 嵌套选择器中的 @extend

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

示例：

.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：

.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;
}

5. 避免样式冲突

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

示例：

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

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

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

编译后的 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中的模块化：

@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中的模块化：

// 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指令会存在以下三个问题：

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

@use的用法：

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

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

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