sass入门-CFANZ编程社区

Sass 入门指南：从零开始学习强大的 CSS 预处理器

一、什么是 Sass？

Sass（Syntactically Awesome Stylesheets）是一个成熟、稳定且功能强大的 CSS 扩展语言，也被称为 CSS 预处理器。它为传统的 CSS 添加了变量、嵌套规则、混合宏（Mixins）、函数等编程特性，使得样式表的编写更加高效、模块化和可维护。

简单来说：Sass 让 CSS 更强大，让开发者写样式更轻松！

二、为什么要使用 Sass？

传统 CSS 的痛点：

没有变量，重复定义颜色、尺寸等值
缺乏代码复用机制，样式冗余
嵌套书写不直观，层级混乱
无法使用逻辑控制（如条件判断、循环）
难以模块化管理

Sass 的优势：

✅ 变量（Variables）：定义一次，多次使用
✅ 嵌套（Nesting）：让 HTML 和 CSS 结构更清晰对应
✅ 混合宏（Mixins）：复用一组 CSS 声明
✅ 继承（Inheritance）：通过 @extend 实现样式复用
✅ 函数与运算：支持数学计算和颜色函数等
✅ 模块化：通过 @use 和 @import 组织代码
✅ 逻辑控制：支持 if、for、each 等语句

三、Sass 的两种语法格式

Sass 最初的语法叫做 缩进语法（.sass），比较简洁但不够直观；后来为了兼容传统 CSS 开发者，推出了 SCSS 语法（.scss），它和普通 CSS 几乎一样，只是增强了功能，因此 SCSS 是目前最流行的语法格式。

特性	.sass (缩进语法)	.scss (SCSS 语法)
语法风格	缩进敏感，无大括号和分号	类似 CSS，使用大括号和分号
学习曲线	较陡峭	平缓，容易上手
推荐程度	较少使用	推荐使用

✅ 本文将以 SCSS（.scss）语法 为例进行讲解，因为它更易读、更友好，也更容易过渡到传统 CSS。

四、如何开始使用 Sass？

1. 安装 Sass（通过 Node.js）

Sass 是用 Dart 语言编写的，但可以通过 Node.js 的包管理器 npm 轻松安装：

npm install -g sass

安装完成后，可以通过以下命令检查是否安装成功：

sass --version

2. 编译 Sass 文件

Sass 文件通常以 .scss 为后缀，你需要将其编译为浏览器能识别的 .css 文件。

示例：

假设你有一个 Sass 文件：styles.scss

// styles.scss
$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

在终端运行以下命令将其编译为 CSS：

sass styles.scss styles.css

编译后生成的 styles.css 内容将是：

body {
  background-color: #3498db;
  font-family: Arial, sans-serif;
}

3. 实时编译（监听文件变化）

开发时推荐使用 监听模式，Sass 会自动监测文件变动并重新编译：

sass --watch styles.scss:styles.css

这样每次你修改 styles.scss 后，Sass 都会自动更新 styles.css，非常方便！

五、Sass 核心功能入门

1. 变量（Variables）

使用 $ 定义变量，可以存储颜色、字体、尺寸等，便于统一管理和修改。

$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;
$padding: 16px;

body {
  color: $primary-color;
  font-family: $font-stack;
  padding: $padding;
}

2. 嵌套（Nesting）

允许将子选择器嵌套在父选择器内，提高可读性，避免重复书写选择器。

nav {
  background: #333;
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      a {
        color: white;
        text-decoration: none;
        padding: 10px 15px;

        &:hover {
          background: #555;
        }
      }
    }
  }
}

编译后的 CSS：

nav {
  background: #333;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}
nav ul li a:hover {
  background: #555;
}

3. 混合宏（Mixins）

Mixins 类似于函数，用于封装一组 CSS 声明，支持参数传递，便于复用。

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
}

.button-primary {
  @include button-style(#3498db, white);
}

.button-danger {
  @include button-style(#e74c3c, white);
}

4. 继承（Extend / Inheritance）

使用 @extend 可以让一个选择器继承另一个选择器的样式，减少冗余代码。

.message {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.success {
  @extend .message;
  background-color: #d4edda;
  color: #155724;
}

.error {
  @extend .message;
  background-color: #f8d7da;
  color: #721c24;
}

5. 运算与函数

Sass 支持基本的数学运算（加减乘除），以及丰富的内置函数，比如颜色函数、字符串函数等。

$base-padding: 10px;

.container {
  padding: $base-padding * 2; // 20px
  margin: 10px + 5px; // 15px
  width: 100% / 3; // 33.33%
}

// 颜色函数
$color: #3498db;
.darken-color {
  background: darken($color, 10%);
}

六、Sass 的模块化（@use 和 @forward）

随着项目变大，推荐使用 @use 替代旧的 @import，以实现更好的模块化和命名空间控制。

// _variables.scss
$primary-color: #3498db;

// main.scss
@use 'variables' as vars;

body {
  color: vars.$primary-color;
}

提示：_variables.scss 下划线开头表示这是一个 局部文件（Partial），不会单独编译，只能被其他 Sass 文件引用。

七、Sass 在实际项目中的应用

在实际前端项目中，Sass 常常与以下工具配合使用：

构建工具：Webpack、Vite、Parcel、Gulp 等
框架集成：React、Vue、Angular 项目都支持 Sass
CSS-in-JS：虽然流行，但 Sass 仍是许多团队的首选预处理器

大多数现代前端脚手架（如 Create React App、Vue CLI）都已内置对 Sass/SCSS 的支持，你只需要在项目中安装 sass 包即可使用。

八、总结：为什么要学 Sass？

原因	说明
✅ 提高效率	通过变量、嵌套、混合宏等减少重复代码
✅ 增强可维护性	模块化、结构清晰，方便团队协作
✅ 功能强大	支持逻辑、函数、运算，更像一门 CSS 编程语言
✅ 生态完善	几乎所有现代前端工具和框架都支持 Sass
✅ 易学易用	SCSS 语法与 CSS 几乎一致，学习门槛低