Sass / SCSS 基础

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

---

1. 安装 Sass

使用命令行安装：

npm install -g sass

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

npm install sass --save-dev

---

2. 基本语法（SCSS）

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

变量

$primary-color: #3498db;

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

嵌套规则

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

混入（mixin）

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

.card {
  @include rounded;
}

---

3. 编译 SCSS

在命令行中运行：

sass style.scss style.css

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

Sass / SCSS 示例

loading