在前端开发中，CSS 是一项非常重要的技术。然而，纯 CSS 开发样式表时存在许多繁琐的工作，例如编写嵌套的样式规则、处理浏览器兼容性、使用复杂计算等。为了解决这些问题，诞生了 Sass 和 Compass。
什么是 Sass？
Sass 是一种 CSS 预处理器，它通过扩展 CSS 的语法来增强样式表的可读性和可维护性。Sass 的语法包含了变量、函数、嵌套、继承等功能，可以大大简化样式规则的编写。
什么是 Compass？
Compass 是 Sass 的一个框架，它为 Sass 提供了大量的函数和混合器（mixins），用于创建常用的样式效果，例如按钮、栅格布局、动画等。
高级用法
变量和参数
在 Sass 中，可以使用 $ 符号定义一个变量，例如：
$primary-color: #007bff;
然后可以在样式规则中使用这个变量：
a {
color: $primary-color;
}除了普通变量，Sass 还支持定义参数变量，例如：
@mixin transition($property, $duration) {
transition: $property $duration ease;
}
.box {
@include transition(background-color, 0.3s);
}上面代码定义了一个 transition 混合器，接受两个参数 property 和 duration。在样式规则中使用 @include 引入混合器，并传递参数。
嵌套和父级引用
在 Sass 中，可以使用嵌套语法来表示 CSS 规则之间的嵌套关系，例如：
-- -------------------- ---- -------
--- -
-- -
----------- -----
-- -
------ -----
------- -
----------------- ---------------
-
-
-
-上面代码定义了一组嵌套的样式规则，实现了一个水平导航栏，并在鼠标悬浮时变色。& 符号用于表示父级引用，这里用于表示 li:hover。
继承和占位符选择器
Sass 中的继承功能可以大大减少样式规则的冗余，例如：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ------ ----- ------- ----- ----------------- --------------- ------ ----- - ------------ - ------- ----- ----------------- ----------------- -
上面代码定义了一个 .btn 类，表示一个基础的按钮样式。然后使用 @extend 指令实现了 .btn-primary 类的继承，并修改了背景颜色。另外，Sass 还提供了占位符选择器的功能，例如：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ------ ----- ------- ----- ----------------- --------------- ------ ----- - ------------ - ------- ----- ----------------- ----------------- -
上面代码使用 % 符号定义了一个占位符选择器，并使用 @extend 指令实现了 .btn-primary 类的继承，但生成的 CSS 中不会包含 %btn。
函数和运算
Sass 中内置了许多有用的函数，例如 rgba()、lighten()、darken() 等。还可以使用 +、-、*、/ 符号实现样式值的运算，例如：
-- -------------------- ---- ------- ----------- ----- ------------- ---- ----------- ----- ---- - ---------- ----------- - ---- - ---------- ---------- - ------- ------------ ---------- - ------------- -
上面代码中，定义了三个变量作为基础字体、行高和基础大小，然后在样式规则中使用 $base-size + 0.5rem 和 $font-size * $line-height 进行了运算。
Compass 的使用
Compass 提供了许多有用的函数和混合器，例如：
transparentize($color, $amount)— 将颜色透明化background-image($image)— 简化背景图片的设置border-radius($radius)— 简化圆角边框的设置box-shadow($shadow...)— 简化阴影的设置clearfix()— 清除浮动inline-block($display),flexbox($orientation)— 简化布局
通过引入 Compass，可以大大减少 CSS 编写的工作量和错误率，例如：
.box {
@include border-radius(5px);
@include box-shadow(0px 2px 2px rgba(0,0,0,0.3));
@include clearfix();
}上面代码使用了 Compass 提供的混合器实现了圆角边框、阴影和清除浮动。
总结
Sass 和 Compass 提供了许多有用的功能，可以大大简化 CSS 开发工作，提高代码的可读性和可维护性。学习 Sass 和 Compass 的高级用法有助于我们更好地体验这种优秀的技术，将其运用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659ebf4eadd4f0e0ff792c1c