Sass（Syntactically Awesome Style Sheets 的缩写）是一种 CSS 预处理器，用于使CSS的使用更加高效和动态。它允许使用变量、嵌套规则、混合和函数等功能，以编写更可维护、更强大的代码。Sass 主要有两种语法格式：SCSS（Sassy CSS）和缩进语法（也称为Sass）。
主要特点：
- **变量**：可以存储颜色、字体或任何CSS值，用于在整个样式表中重用。
```scss
$primary-color: #333;
body {
color: $primary-color;
}
```
- **嵌套**：允许将CSS规则嵌套在另一规则内，更直观地表达层级。
```scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a { text-decoration: none; }
}
```
- **混合（Mixins）**：可以创建可重用的代码块，并在需要时包含它们。
```scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
```
- **继承**：可以让一个选择器继承另一个选择器的样式。
```scss
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
```
- **函数**：可以定义自己的函数，并返回值。
```scss
@function pow($base, $exponent) {
$result: 1;
@for $i from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.sidebar { width: pow(2, 3) * 1px; }
```
- **条件和循环**：支持使用条件和循环逻辑来生成CSS。
```scss
@for $i from 1 through 3 {
.item-#{$i} { width: 20px * $i; }
}
```
使用Sass
要使用Sass，你需要先将其安装在你的项目中。Sass可以通过Node.js的npm或者Yarn来安装：
```bash
npm install -g sass
```
或者
```bash
yarn add sass
```
安装后，你可以通过命令行或者构建工具（如Webpack）来编译你的`.scss`或`.sass`文件到标准的CSS文件。这使得管理和部署项目更为便捷。
Sass的这些功能使得编写CSS更加灵活和强大，同时保持代码的易读性和可维护性。