# Sass / SCSS 基础

URL: https://caijiao.org/css/12-preprocessor/01-sass-basics
Source: docs/css/12-preprocessor/01-sass-basics.md
Description: Sass / SCSS 是 CSS 的扩展语言，提供变量、嵌套、模块化等高级功能，使样式编写更高效、可维护。

Sass 是一种 CSS 预处理器，增强了 CSS 的功能性和组织性。SCSS 是 Sass 的一种语法风格，更接近原生 CSS。它们允许使用变量、嵌套规则、混入（mixin）、函数等，使样式代码更简洁、模块化。

---

## 1. 安装 Sass

使用命令行安装：

```bash
npm install -g sass
```

或者在项目中作为开发依赖：

```bash
npm install sass --save-dev
```

---

## 2. 基本语法（SCSS）

SCSS 文件以 `.scss` 为后缀，语法类似 CSS，支持：

### 变量

```scss
$primary-color: #3498db;

button {
  background-color: $primary-color;
}
```

### 嵌套规则

```scss
nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}
```

### 混入（mixin）

```scss
@mixin rounded {
  border-radius: 8px;
}

.card {
  @include rounded;
}
```

---

## 3. 编译 SCSS

在命令行中运行：

```bash
sass style.scss style.css
```

也可使用开发工具（如 Vite、Webpack）自动编译。

## Sass / SCSS 示例

[在线代码演示](/css/demos/36.html)