Sass 是一个用来编写更优雅、更直观和更易于维护的 CSS 的预处理器。通过 Sass，开发者可以使用变量、嵌套规则、运算和 mixins 等额外功能，同时还可以在 CSS 基础上引入像函数和控制指令等更为高级的功能。
本篇文章将详细介绍 Sass 3.3 的使用方法，并提供一些示例代码，帮助读者更快地掌握 Sass 的运用技巧。
Sass 简介
Sass 源自于 Ruby，它最早由 Hampton Catlin 开发。后来，Natalie Weizenbaum 继续开发 Sass，并使之成为了现代 CSS 预处理器的一种标准。Sass 的主要功能包括：
- 变量：可以存储和重用值，避免写重复的 CSS。
- 嵌套规则：可以更清晰地表达 HTML 元素的联系。
- 运算：能够计算样式属性，让样式更灵活。
- Mixins：可以使用预定义的 CSS 样式，然后把它插入到其它样式中。
- 函数：提供更多的操作 CSS 样式表的方法。
- 控制指令：增强了 CSS 语言的能力，例如条件语句、循环等。
Sass 的安装
首先，我们需要安装 Sass，安装 Sass 有两种方法：Ruby 安装和独立安装。这里我使用独立安装方法：
- 首先，我们需要安装 Node.js，可前往 Node.js 官网下载安装。
- 安装完成 Node.js 后，在终端中执行以下命令进行安装：
npm install -g sass
- 安装完成后，运行以下命令检查是否安装成功：
sass -v
若出现 Sass 版本号，则说明安装成功。
Sass 的语法
Sass 有两种语法：缩进语法和 SCSS 语法。缩进语法更为简单，但是没有花括号，而 SCSS 语法跟 CSS 更为接近。这里我们主要介绍 SCSS 语法。
基本语法
SCSS 的语法与 CSS 相似，可以直接编写 CSS 代码，也可以使用 Sass 的语法。Sass 的语法与 CSS 不同的地方在于，Sass 添加了许多新的特性，如：
- 变量
- 嵌套规则
- mixin
- 控制指令
例如：
$primary-color: #0080ff; // 定义一个变量
.header {
background-color: $primary-color;
h1 {
font-weight: bold;
}
}编译结果为：
.header {
background-color: #0080ff;
}
.header h1 {
font-weight: bold;
}变量
在 Sass 中，变量用于存储数值、颜色、文本等值，并能通过变量名来引用这些值。
-- -------------------- ---- ------- --------------- -------- ----------- ----- ------------------ -------- ---- - ----------------- ------------------ ------ --------------- ---------- ----------- -
编译后为：
body {
background-color: #ffffff;
color: #0080ff;
font-size: 16px;
}嵌套规则
Sass 支持嵌套规则，结构清晰易读。
-- -------------------- ---- -------
------- -
----------------- --------
-- -
---------- -----
------------ -----
-
- -
---------- -----
------ -----
-
-编译后：
-- -------------------- ---- ------- ------- - ----------------- -------- - ------- -- - ---------- ----- ------------ ----- - ------- - - ---------- ----- ------ ----- -
Mixins
Mixin 允许开发人员定义一段 CSS 样式，并在需要时进行调用，避免重复代码。
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- ------------------ -------- -------------- -------- - ------- - -------- ------------------- -
编译后：
.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}控制指令
Sass 的控制指令包括 @if、@for、@while 以及 @each 等。这里举一个例子：
$content: ('home', 'about', 'services', 'contact');
@each $page in $content {
.menu-#{$page} {
background-image: url('#{$page}-icon.png');
}
}编译后：
-- -------------------- ---- ------- ---------- - ----------------- --------------------- - ----------- - ----------------- ---------------------- - -------------- - ----------------- ------------------------- - ------------- - ----------------- ------------------------ -
Sass 的实战应用
最后，我们重点介绍 Sass 的实际应用。
继承
Sass 的继承特性可以方便地在需要的时候集成某些样式。例如：
-- -------------------- ---- ------- -- ------ -- ----------- - ---------- ----- ------------ ------- ------ ----- - -- ------ -- ---------- - ------- ------------ ------------ ----- ------ -------- - ---- - ------- ------------ - -- - ------- ----------- -
编译后：
-- -------------------- ---- ------- ----- -- - ---------- ----- ------------ ------- ------ ----- - -- - ------------ ----- ------ -------- -
函数
Sass 的函数可以使用已有样式创建新的样式属性。
-- -------------------- ---- -------
--------- -------------------- -
--- ------- -- ------- -
------- --------
- ------- ------- -- ------ -
------- --------
- ------- ------- -- -------- -
------- --------
- ----- -
------- --------
-
-
------------ -
------------- ---------------------
-
----------- -
------------- --------------------
-
------------- -
------------- ----------------------
-编译后：
-- -------------------- ---- ------- ------------ - ------------- -------- - ----------- - ------------- -------- - ------------- - ------------- -------- -
嵌套和变量
Sass 的变量和嵌套规则可以让我们更好地描述 HTML 结构。例如：
-- -------------------- ---- -------
-------------------------- --------
-------------- ----
-------------- -----
------- -
----------------- --------------------------
------- ------------- ----- --------------
------ -
----------------- ---------------------------------- -----
-------------- ------------- ----- --------------
-- -
---------- -----
------------ -----
------ -----
------- -----
-
-
--- -
---------- -----
------ -----
------- -----
- -
------- -----
------------ ------
-
-
-编译后：
-- -------------------- ---- ------- ------- - ----------------- -------- ------- --- ----- ----- - ------- ------ - ----------------- -------- -------------- --- ----- ----- - ------- ------ -- - ---------- ----- ------------ ----- ------ ----- ------- ----- - ------- --- - ---------- ----- ------ ----- ------- ----- - ------- --- - - ------- ----- ------------ ------ -
结论
Sass 为开发者提供了灵活而强大的方式写 CSS，它拥有许多重要的特性，如变量、嵌套规则、运算、mixins 和 控制指令等。如果您正在开发前端代码，那么很有必要了解和掌握 Sass。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67480d745883fc5ebff2920d