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

1. 安装Sass

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

• 通过 npm 安装
  如果你利用 Node.js 和 npm，可以通过以下命令全局安装 Sass：
  
  1. npm install -g sass

  复制代码
• 通过 yarn 安装
  如果你偏好利用 Yarn，可以实行：
  
  1. yarn global add sass

  复制代码
• 全局安装 Sass
  如果你偏好利用 pnpm，可以实行：
  
  1. pnpm add -g sass

  复制代码
• 作为项目依赖安装
  如果你盼望将 Sass 仅作为特定项目标开发依赖，可以在项目目次下实行：
  
  1. pnpm add -D sass

  复制代码

安装完成后，你可以通过命令行利用 Sass，或者在构建工具中设置 Sass 的利用。如果你利用的是像 Webpack 这样的模块打包工具，可能还必要安装额外的 loader 来处理处罚 .scss 或 .sass 文件。
验证安装
为了确保 Sass 已精确安装，你可以运行以下命令来检查 Sass 版本：

1. sass --version

复制代码

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

2. Sass编译成CSS

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

1. .card {
2.   width: 100%;
3.   color: blue;
4.   font-size: 14px;
5.   font-weight: 500;
6. }

复制代码

实行命令：

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

复制代码

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

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

• 命令格式：
  
  1. sass --watch [输入文件或目录]:[输出文件或目录]

  复制代码
• 示例：
  
  
  
  • 监视单个文件：
    1. sass --watch input.scss:output.css

    复制代码
  • 监视整个目次：
    1. sass --watch scss:css

    复制代码
  
  

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

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

1. .card {
2.   width: 100%;
3.   color: blue;
4.   font-size: 14px; }
6. .card .title {
7.   color: #333;
8.   font-family: "Courier New", Courier, monospace; }

复制代码

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

1. sass -w sass:css -s  expanded

复制代码

生成的 CSS 如下：

1. .card {
2.   width: 100%;
3.   color: blue;
4.   font-size: 14px;
5. }
7. .card .title {
8.   color: #333;
9.   font-family: "Courier New", Courier, monospace;
10. }

复制代码

• Compact 样式
  利用 --style compact 选项，输特别式为紧凑样式，每个选择器和声明块在一行内。
  

1. sass -w sass:css -s  compact

复制代码

生成的 CSS 如下：

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

复制代码

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

1. sass -w sass:css -s compressed

复制代码

生成的 CSS 如下：

1. .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 风格的人。
    
  示例：
  
  1. .card
  2.   width: 100%
  3.   color: blue
  4.   font-size: 14px
  6.   .title
  7.     color: #333
  8.     font-family: "Courier New", Courier, monospace

  复制代码
  
  
• SCSS (Sassy CSS)
  
  
  
  • 文件扩展名：.scss
    
  • 类似于尺度的 CSS 语法，利用大括号 {} 和分号 ;。
    
  • 更接近传统的 CSS 写法，轻易上手，得当从 CSS 迁徙过来的开发者。
    
  示例：
  
  1. .card {
  2.   width: 100%;
  3.   color: blue;
  4.   font-size: 14px;
  6.   .title {
  7.     color: #333;
  8.     font-family: "Courier New", Courier, monospace;
  9.   }
  10. }

  复制代码
  
  

• 兼容性
  

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

• 社区支持和工具链
  

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

• 选择发起
  

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

总结

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

5. Sass变量的利用

1. $primary-color: #333;
2. $primary-border: 1px solid $primary-color;
3. $primary-background: #f5f5f5;
5. .card {
6.   width: 200px;
7.   height: 200px;
8.   font-size: 14px;
9.   color: $primary-color;
10.   border: $primary-border;
11.   background-color: $primary-background;
12. }

复制代码

6. 选择器嵌套写法

• 结构嵌套
  

1. <nav>
2.   <ul>
3.     <li class="item active">
4.       <a href="#">首页</a>
5.     </li>
6.     <li class="item">
7.       <a href="#">关于</a>
8.     </li>
9.   </ul>
10. </nav>

复制代码

1. nav {
2.   background: #f5f5f5;
3.   ul {
4.     li {
5.       a {
6.         &:hover {
7.           color: blue;
8.         }
9.       }
10.       &.item {
11.         color: #333;
12.       }
14.       &.active {
15.         a {
16.           color: red;
17.         }
18.       }
19.     }
20.   }
21. }

复制代码

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

1. body {
2.   font-size: 14px;
3.   font-weight: 400;
4.   font-family: "Courier New", Courier, monospace;
5. }

复制代码

嵌套后：

1. body {
2.   font: {
3.     font-size: 14px;
4.     font-weight: 400;
5.     font-family: "Courier New", Courier, monospace;
6.   }
7. }

复制代码

输出：

7. Mixin(混合)

Sass 中的 @mixin 是一种非常强大的功能，它答应你界说一组样式规则，并在多个地方复用这些规则。这不仅提高了代码的可维护性，还镌汰了重复代码。

• 界说和利用 @mixin
  

界说 @mixin
利用 @mixin 关键字界说一个 mixin，后面跟上 mixin 的名称和括号（即使没有参数也需包含括号）。可以在括号中通报参数，以加强灵活性。
示例：

1. @mixin font-settings($size, $weight, $family) {
2.   font-size: $size;
3.   font-weight: $weight;
4.   font-family: $family;
5. }

复制代码

利用 @include
利用 @include 关键字来应用 mixin。可以通报参数值给 mixin，使其更具动态性。
示例：

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

复制代码

• 带默认参数的 @mixin
  

你可以为 mixin 的参数设置默认值，这样在调用时可以选择性地通报参数。
示例：

1. @mixin font-settings($size: 16px, $weight: 400, $family: "Arial", sans-serif) {  font-size: $size;  font-weight: $weight;  font-family: $family;}body {
2.   @include font-settings(14px, 400, "Courier New", Courier, monospace);
3. }
4. h1 {  @include font-settings($size: 24px, $weight: bold);}

复制代码

• 带可变参数的 @mixin
  

有时你可能必要通报不定命目的参数。可以利用 $args... 语法来实现。
示例：

1. @mixin font-settings($size, $weight, $family...) {  font-size: $size;  font-weight: $weight;  font-family: $family;}body {
2.   @include font-settings(14px, 400, "Courier New", Courier, monospace);
3. }

复制代码

• 带条件逻辑的 @mixin
  

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

1. @mixin font-settings($size, $weight, $family, $line-height: null) {
2.   font-size: $size;
3.   font-weight: $weight;
4.   font-family: $family;
6.   @if $line-height {
7.     line-height: $line-height;
8.   }
9. }
11. body {
12.   @include font-settings(14px, 400, "Courier New", Courier, monospace, 1.5);
13. }
15. p {
16.   @include font-settings(16px, 400, "Arial", sans-serif);
17. }

复制代码

• 结合选择器嵌套利用 @mixin
  

你可以在嵌套的选择器中利用 mixin，以保持代码结构清楚。
示例：

1. @mixin font-settings($size, $weight, $family) {
2.   font-size: $size;
3.   font-weight: $weight;
4.   font-family: $family;
5. }
6. nav {  ul {    li {      a {        @include font-settings(14px, 400, "Courier New", Courier, monospace);        &:hover {          color: purple;        }      }      &.item {        background-color: red;      }    }  }}

复制代码

• 应用多个mixin
  

1. <nav>
2.       <ul>
3.         <li><a href="#">导航1</a></li>
4.         <li><a href="#">导航2</a></li>
5.         <li><a href="#">导航3</a></li>
6.         <li><a href="#">导航4</a></li>
7.         <li><a href="#">导航5</a></li>
8.         <li><a href="#">导航6</a></li>
9.       </ul>
10.     </nav>

复制代码

1. @mixin flex-settings($flex-direction, $flex-wrap, $justify-content, $align-items, $gap: 0) {
2.   display: flex;
3.   flex-direction: $flex-direction;
4.   flex-wrap: $flex-wrap;
5.   justify-content: $justify-content;
6.   align-items: $align-items;
8.   @if $gap != 0 {
9.     gap: $gap;
10.   }
11. }
13. @mixin font-settings($font-size: 16px, $font-weight: 400, $font-family...) {
14.   font: {
15.     size: $font-size;
16.     weight: $font-weight;
17.     family: $font-family;
18.   }
19. }
20. nav {
21.   width: 400px;
22.   ul {
23.     width: 100%;
24.     @include flex-settings(column, nowrap, space-between, center, 30px);
25.     li {
26.       list-style: none;
27.       // 去除下划线
28.       a {
29.         display: block;
30.         text-decoration: none;
31.         @include font-settings(16px, 700, "微软雅黑", Arial);
32.       }
33.     }
34.   }
35. }

复制代码

输出的CSS:

1. @charset "UTF-8";
2. nav {
3.   width: 400px;
4. }
5. nav ul {
6.   width: 100%;
7.   display: flex;
8.   flex-direction: column;
9.   flex-wrap: nowrap;
10.   justify-content: space-between;
11.   align-items: center;
12.   gap: 30px;
13. }
14. nav ul li {
15.   list-style: none;
16. }
17. nav ul li a {
18.   display: block;
19.   text-decoration: none;
20.   font-size: 16px;
21.   font-weight: 700;
22.   font-family: "微软雅黑", Arial;
23. }
25. /*# sourceMappingURL=style.css.map */

复制代码

总结

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

8. extend(继续)

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

• 基本用法
  

@extend 答应一个选择器继续另一个选择器的所有样式规则。目标选择器必须在样式表中已经界说。
示例：

1. .card1 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5.   a {
6.     font-weight: 700;
7.     color: white;
8.   }
9. }
11. .card2 {
12.   @extend .card1;
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

编译后的 CSS：

1. .card1, .card2 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5. }
7. .card1 a, .card2 a {
8.   font-weight: 700;
9.   color: white;
10. }
12. .card2 {
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

• 注意事项
  

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

• 利用 !optional 关键字
  

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

1. .card2 {
2.   @extend .card1 !optional;
3.   background-color: red;
4.   font-size: 30px;
5. }

复制代码

• 嵌套选择器中的 @extend
  

你可以在嵌套选择器中利用 @extend，以保持代码结构清楚。
示例：

1. .card1 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
6.   a {
7.     font-weight: 700;
8.     color: white;
9.   }
10. }
12. .card2 {
13.   @extend .card1;
15.   background-color: red;
16.   font-size: 30px;
18.   a {
19.     color: yellow;
20.   }
21. }

复制代码

编译后的 CSS：

1. .card1, .card2 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5. }
7. .card1 a, .card2 a {
8.   font-weight: 700;
9.   color: white;
10. }
12. .card2 {
13.   background-color: red;
14.   font-size: 30px;
15. }
16. .card2 a {  color: yellow;}

复制代码

• 避免样式辩说
  

确保继续的选择器不会导致样式辩说。比方，.card2 中的 background-color 会覆盖 .card1 中的 background-color。
示例：

1. .card1 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5.   a {
6.     font-weight: 700;
7.     color: white;
8.   }
9. }
11. .card2 {
12.   @extend .card1;
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

编译后的 CSS：

1. .card1, .card2 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5. }
7. .card1 a, .card2 a {
8.   font-weight: 700;
9.   color: white;
10. }
12. .card2 {
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

总结

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

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

我们都知道，在CSS中也存在@import指令，在说明Sass中的模块化之前，必要对两个关键概念有所了解，即编译时和运行时。
编译时（Compile Time）
编译时 是指在代码被实际运行之前，通过编译器或预处理处罚器将源代码转换为目标代码的过程。对于 Sass 文件，编译时是指将 .scss 文件转换为 .css 文件的过程。
特点：

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

运行时（Run Time）
运行时 是指代码在实际运行环境中实行的时间点。对于前端开发，运行时通常是指欣赏器加载和实行 HTML、CSS 和 JavaScript 文件的时间。
特点：

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

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

CSS中的模块化：

1. @import url("../base/index.css");// 或者// @import "../base/index.css";.container {  background-color: black;}.card1 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5.   a {
6.     font-weight: 700;
7.     color: white;
8.   }
9. }
11. .card2 {
12.   @extend .card1;
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

编译后的结果：

运行后的结果：

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

1. // scss文件不用写扩展名@import "../base/index";.container {  background-color: black;}.card1 {
2.   width: 300px;
3.   height: 300px;
4.   background-color: blue;
5.   a {
6.     font-weight: 700;
7.     color: white;
8.   }
9. }
11. .card2 {
12.   @extend .card1;
13.   background-color: red;
14.   font-size: 30px;
15. }

复制代码

编译后的结果：

运行后的结果：

这里说明，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的用法：

1. @use "variables" as vars; // 这里默认的命名空间是variables， 重新设置命名空间为vars
3. .button {
4.         color: vars.$primary-color; // 使用模块中定义的变量
5. }
7. $-radius: 3px; // 设置模块的私有成员 - 或 _ 都可以

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。