Sass（Syntactically Awesome Stylesheets）是 CSS 的扩展语言，与原生 CSS 相比，Sass 具有以下特征：
语法特性
-
嵌套语法：在 CSS 中，书写多层嵌套选择器时代码会冗长且可读性差，Sass 支持选择器嵌套，使代码结构更清晰，更贴合 HTML 的层级关系。
/* CSS /
nav ul li a {
color: blue;
}
/ Sass */
nav {
ul {
li {
a {
color: blue;
}
}
}
} -
变量使用：CSS 中虽然有自定义属性（CSS 变量），但 Sass 更早实现变量功能，且使用起来更方便。可以用变量存储颜色、字体大小等重复使用的值，修改时只需改一处。
/* CSS /
body {
color: #333;
}
h1 {
color: #333;
}
/ Sass */
primary-color: #333; body { color: primary-color;
}
h1 {
color: $primary-color;
} -
运算功能：Sass 支持加、减、乘、除、取模等运算，方便处理数值，比如动态计算元素的宽度、边距等。
width: 100px; div { width: width * 2; // 宽度为200px
margin-left: $width / 2; // 左边距为50px
}
功能特性
-
Mixin（混入）：可以定义一组可复用的样式，然后在需要的地方引入，避免重复编写相同样式。
@mixin border-radius(radius) { -webkit-border-radius: radius;
-moz-border-radius: radius; border-radius: radius;
}
.box {
@include border-radius(5px);
} -
继承 ：Sass 的继承特性（
@extend）可以让一个选择器继承另一个选择器的所有样式，减少代码冗余。.success {
color: green;
border: 1px solid green;
}
.special-success {
@extend.success;
font-weight: bold;
} -
函数：Sass 内置了许多函数，如颜色处理函数、字符串函数、数学函数等，还支持自定义函数，方便对数据进行处理。
// 自定义函数计算正方形面积
@function square(size) { @return size * $size;
}
div {
width: square(10px); // 宽度为100px
}
组织管理特性
-
模块化 ：Sass 允许通过
@import指令导入其他 Sass 文件，将样式分割成多个模块，便于维护和管理。比如把全局样式、组件样式等分别写在不同文件中。// main.scss中导入其他样式文件
@import 'variables';
@import 'components/button';
通过这些特性，Sass 提高了样式代码的可读性、可维护性和复用性，让开发者能够更高效地编写和管理样式表，尤其适用于大型项目。