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 的版本号输出。
https://i-blog.csdnimg.cn/direct/fabcda05597c400f9c64914473081bb3.png
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文件中,如下图所示：
https://i-blog.csdnimg.cn/direct/1f26c79371c645408bab0543d236afad.png
监视文件变化
sass --watch 是一个用于监视 Sass 文件更改并自动编译为 CSS 的命令。
[*] 命令格式：
sass --watch [输入文件或目录]:[输出文件或目录]
[*] 示例：
[*]监视单个文件：sass --watch input.scss:output.css
[*]监视整个目次：sass --watch scss:css
https://i-blog.csdnimg.cn/direct/9a04fb9ba84042a09d87e7d4a58bb7ec.png
https://i-blog.csdnimg.cn/direct/d55abdff93e44e418f98f6bf8e7ba9c5.png
当监视之后，当指定的 .scss 或 .sass 文件发生更改时，Sass 编译器会自动重新编译这些文件，并将生成的 CSS 文件保存到指定的输出路径。
这样可以避免手动编译，提高开发效率。
3. 设置编译后的CSS格式
[*]默认输出样式（nested）
这是默认的输出样式，嵌套结构与 Sass 文件中的嵌套相似。
.card {
width: 100%;
color: blue;
font-size: 14px; }
.card .title {
color: #333;
font-family: "Courier New", Courier, monospace; }
[*]Expanded 样式
利用 --style expanded 选项，输特别式为扩展样式，每条规则占一行，但仍然保持缩进。
sass -w sass:css -sexpanded
生成的 CSS 如下：
.card {
width: 100%;
color: blue;
font-size: 14px;
}
.card .title {
color: #333;
font-family: "Courier New", Courier, monospace;
}
[*]Compact 样式
利用 --style compact 选项，输特别式为紧凑样式，每个选择器和声明块在一行内。
sass -w sass:css -scompact
生成的 CSS 如下：
.card { width: 100%; color: blue; font-size: 14px; }
.card .title { color: #333; font-family: "Courier New", Courier, monospace; }
[*]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。以下是它们的紧张区别：
[*]语法格式
[*] 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;
}
}
[*]兼容性
[*]SCSS：完全兼容 CSS 语法，可以直接将现有的 CSS 文件重命名为 .scss 并继续利用，无需修改内容。
[*]Sass：不兼容 CSS 语法，必要转换为缩进格式，不能直接利用尺度的 CSS 语法。
[*]社区支持和工具链
[*]SCSS：由于其与 CSS 的相似性，SCSS 更广泛利用，社区支持更好，大多数现代工具链（如 Webpack、Gulp 等）默认支持 SCSS。
[*]Sass：虽然功能类似，但由于语法差异，利用较少，某些工具可能必要额外设置才能支持。
[*]选择发起
[*]如果你是新手或从 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. 选择器嵌套写法
[*]结构嵌套
<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;
}
}
}
}
}
[*]属性嵌套
嵌套前，这些属性都有共同的部门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;
}
}
输出：
https://i-blog.csdnimg.cn/direct/cec18690c08c4bd788893524e7b316a7.png
7. Mixin(混合)
Sass 中的 @mixin 是一种非常强大的功能，它答应你界说一组样式规则，并在多个地方复用这些规则。这不仅提高了代码的可维护性，还镌汰了重复代码。
[*]界说和利用 @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);
}
[*]带默认参数的 @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);}
[*]带可变参数的 @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);
}
[*]带条件逻辑的 @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);
}
[*]结合选择器嵌套利用 @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; } }}}
[*]应用多个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 指令用于将一个选择器的样式继续到另一个选择器中。这可以资助你避免重复代码，并且可以使样式表更加模块化和易于维护。
[*]基本用法
@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;
}
[*]注意事项
[*]目标选择器必须存在：@extend 的目标选择器（如 .card1）必须在样式表中已经界说，否则会报错。
[*]避免不必要的继续：过度利用 @extend 可能会导致生成的 CSS 文件变得巨大且难以维护。确保只在必要时利用。
[*]选择器合并：@extend 会将继续的选择器合并在一起，这有助于镌汰重复的样式规则。
[*]利用 !optional 关键字
如果你不确定目标选择器是否存在，可以利用 !optional 关键字来避免编译错误。
示例：
.card2 {
@extend .card1 !optional;
background-color: red;
font-size: 30px;
}
[*]嵌套选择器中的 @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;}
[*]避免样式辩说
确保继续的选择器不会导致样式辩说。比方，.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 文件的时间。
特点：
[*]动态处理处罚：运行时处理处罚的是动态内容，涉及实际的用户交互和环境变化。
[*]性能影响：运行时的性能直接影响用户体验。
[*]资源加载：欣赏器必要加载和解析所有依赖的资源文件。
[*]错误处理处罚：运行时错误通常必要通过欣赏器的开发者工具进行调试。
注意：当前项目标目次结构如下，以下说明都会基于这个目次结构说明。
https://i-blog.csdnimg.cn/direct/7a4cfae2e2fa4d1e85ee7d6b78eb4749.png
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;
}
编译后的结果：
https://i-blog.csdnimg.cn/direct/c801114980314fe4800b34bbe8a91b96.png
运行后的结果：
https://i-blog.csdnimg.cn/direct/368fd1fb7b9048f089b6b2d2ec268f10.png#pic_center
这里说明，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;
}
编译后的结果：
https://i-blog.csdnimg.cn/direct/cb12c7977dbb4b77a556a9422940d214.png#pic_center
运行后的结果：
https://i-blog.csdnimg.cn/direct/bacf41a299b044a1b6b23a2d084ff305.png#pic_center
这里说明，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的用法：
@use "variables" as vars; // 这里默认的命名空间是variables， 重新设置命名空间为vars
.button {
color: vars.$primary-color; // 使用模块中定义的变量
}
$-radius: 3px; // 设置模块的私有成员 - 或 _ 都可以
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]