什么是 SASS？
SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的语法，提供了一些便利的功能，使得样式表更易于维护和扩展。
SASS 可以让你使用变量、函数、嵌套规则、Mixin 等高级功能，以及通过使用嵌套规则和父选择器，可以使得样式表的层次结构更加清晰明了。
基本语法
变量
在 SASS 中，你可以使用变量来保存颜色、字体、大小等常用的值。定义一个变量使用 $ 符号，例如：
$primary-color: #3498db;
在样式中使用变量时，使用 #{} 语法：
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}嵌套规则
SASS 可以让你使用嵌套规则，使得样式表的层次结构更加清晰明了。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
-------- ------
-------- --- -----
---------------- -----
-
-
-
-Mixin
Mixin 是 SASS 中的一个高级功能，它可以让你定义一组样式，并在需要的地方重复使用。例如：
-- -------------------- ---- -------
------ ---------------------- -
---------------------- --------
------------------- --------
------------------ --------
-------------- --------
-
---- -
-------- --------------------
-继承
SASS 中的继承功能可以让你将一个选择器的样式继承到另一个选择器上。例如：
-- -------------------- ---- -------
------ -
------- --- ----- -----
----------------- -----
------- -
---------- ----
-
-
------------- -
------- -------
------------- ----
-操作符
SASS 中支持一些操作符，例如 +、-、*、/、% 等，可以用于计算和比较。例如：
-- -------------------- ---- ------- ---------- - ------ ----- ---------- ------ ------- - ----- - ------- - ------ ----- ------ ----- - ----- - ----- ------------- ----- -
技巧
使用 Partials
Partials 是以 _ 开头的文件，用于包含一些通用的样式，例如变量、Mixin 等。使用 Partials 可以让你更好地组织你的样式表。例如：
-- -------------------- ---- -------
-- ---------------
--------------- --------
-- ------------
------ ---------------------- -
---------------------- --------
------------------- --------
------------------ --------
-------------- --------
-
-- ----------
------- ------------
------- ---------
---- -
-------- --------------------
-使用 @import
SASS 中的 @import 功能可以让你将多个样式表合并为一个。例如：
-- -------------------- ---- ------- -- ---------- ------- -------- ------- ------------ ------- --------- ------- --------- -- ----------- ------ - -------- ---------- -
使用函数
SASS 中内置了很多有用的函数，例如 darken()、lighten()、rgba() 等，可以让你更加灵活地处理颜色、透明度等。例如：
a {
color: rgba(0, 0, 0, 0.5);
&:hover {
color: darken($primary-color, 10%);
}
}总结
SASS 是一种 CSS 预处理器，它扩展了 CSS 的语法，提供了一些便利的功能，使得样式表更易于维护和扩展。本文介绍了 SASS 的基本语法和一些技巧，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fb958d2f5e1655da94842