什么是 Sass？
Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS，使其更加灵活和可维护。Sass 可以通过变量、嵌套、函数、继承等特性，让 CSS 更加具有逻辑性和可读性。
安装 Sass
Sass 可以通过命令行工具安装，也可以通过包管理器安装。
命令行工具安装
在命令行中运行以下命令：
npm install -g sass
包管理器安装
- 在 npm 中安装：
npm install sass
- 在 yarn 中安装：
yarn add sass
Sass 基础语法
变量
Sass 中可以使用变量来存储颜色、字体、大小等属性值，以便于在整个样式表中重复使用。
-- -------------------- ---- ------- --------------- -------- ----------------- -------- ------- - ----------------- --------------- ------ ----- ------- ----- - ----------------- - ----------------- ----------------- ------ ----- ------- ----- -
嵌套
Sass 支持嵌套语法，可以让 CSS 的结构更加清晰，代码更加易读。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- -
-------- -------------
------- - -----
-
- -
------ -----
---------------- -----
------- -
---------------- ----------
-
-
-继承
Sass 中可以使用继承语法，使样式更加简洁，减少代码的重复。
-- -------------------- ---- ------- ------- - ----------------- -------- ------ ----- ------- ----- - ------- - ------- -------- - ----------------- - ------- -------- ----------------- -------- -
Mixin
Mixin 是 Sass 中的一个非常有用的功能，可以将一组样式封装成一个可重复使用的代码块，使用 @include 引入。
-- -------------------- ---- ------- ------ ----------------- ------- - ----------------- ---------- ------ ------- ------- ----- - ------- - -------- --------------- ------ - ----------------- - -------- --------------- ------ -
函数
Sass 中可以定义函数，用来处理一些常用的样式计算，例如颜色亮度、字体大小等。
@function lighten($color, $amount) {
@return mix(#fff, $color, $amount);
}
.button {
background-color: lighten(#007bff, 20%);
}Sass 的高级功能
控制指令
Sass 中支持控制指令，可以用来控制样式的输出。
@if
@if 控制指令可以根据条件输出不同的样式。
-- -------------------- ---- -------
--------------- --------
----------------- --------
------ ----------------- -
--- --------- -- -------------- -
----------------- ---------------
------ -----
- ----- -
----------------- -----------------
------ -----
-
-
------- -
-------- ----------------
-
----------------- -
-------- ----------------
-@for
@for 控制指令可以循环输出样式。
@for $i from 1 through 3 {
.button-#{$i} {
background-color: #007bff;
color: #fff;
border: none;
}
}@each
@each 控制指令可以循环输出样式。
-- -------------------- ---- -------
--------------- -
-------- --------
---------- -------
--
----- ------ ------ -- -------------- -
---------------- -
----------------- -------
------ -----
------- -----
-
-条件运算符
Sass 中支持条件运算符，可以在样式中使用条件判断。
$primary-color: #007bff;
.button {
background-color: if($primary-color == #007bff, #fff, #000);
}插值
Sass 中支持插值语法，可以在样式中使用变量。
$button-color: #007bff;
.#{$button-color}-button {
background-color: $button-color;
color: #fff;
border: none;
}总结
Sass 是一种非常有用的 CSS 预处理器，它扩展了 CSS 的语法，使样式更加灵活和可维护。通过变量、嵌套、继承、Mixin 等高级语法，可以让 CSS 的编写变得更加高效和简洁。掌握 Sass 的基础语法和高级功能，可以帮助我们更好地管理和维护 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fe379d2f5e1655dacd05c