Sass 简介 #

什么是 CSS 预处理器？ #

CSS 预处理器是一种脚本语言，它扩展了 CSS 的功能，通过特殊的编译器将预处理代码转换为标准的 CSS 代码。预处理器为 CSS 添加了编程语言的特性，如变量、函数、条件语句等。

text 
┌─────────────────┐
│   预处理代码     │
│   (.scss/.sass) │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│    编译器        │
│   (Dart Sass)   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   标准 CSS       │
│   (.css)        │
└─────────────────┘

什么是 Sass？ #

Sass（Syntactically Awesome Style Sheets，语法上很棒的样式表）是最成熟、稳定、强大的 CSS 预处理器。它由 Hampton Catlin 设计，由 Natalie Weizenbaum 开发，于 2006 年首次发布。

Sass 的历史 #

text 
2006年 ─── Sass 诞生（Ruby Sass）
    │
    │      Hampton Catlin 设计
    │      Natalie Weizenbaum 开发
    │
2007年 ─── 引入 .scss 语法
    │
    │      更接近 CSS 语法
    │      更易于学习
    │
2010年 ─── Compass 框架发布
    │
    │      提供丰富的 Mixin 库
    │
2016年 ─── LibSass 发布
    │
    │      C/C++ 实现
    │      编译速度更快
    │
2019年 ─── Dart Sass 成为官方实现
    │
    │      Ruby Sass 停止维护
    │      LibSass 弃用
    │
至今   ─── 持续更新迭代

Sass 的两种语法 #

1. 缩进语法（Sass） #

使用缩进表示嵌套，没有大括号和分号：

sass 
// style.sass
$primary-color: #3498db

.container
  width: 100%
  padding: 20px
  
  .item
    color: $primary-color
    
    &:hover
      color: darken($primary-color, 10%)

2. SCSS 语法 #

使用大括号和分号，完全兼容 CSS 语法：

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

.container {
  width: 100%;
  padding: 20px;
  
  .item {
    color: $primary-color;
    
    &:hover {
      color: darken($primary-color, 10%);
    }
  }
}

两种语法对比 #

特性 Sass SCSS
文件扩展名 .sass .scss
大括号 不需要 需要
分号 不需要 需要
缩进 严格 不严格
CSS 兼容 不兼容 完全兼容
学习曲线 需要适应 更容易

推荐使用 SCSS 语法，因为它与 CSS 完全兼容，学习成本更低。

Sass 的核心特性 #

1. 变量 #

scss 
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

2. 嵌套 #

scss 
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 模块化 #

scss 
// _reset.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

// style.scss
@use 'reset';

body {
  font-family: Helvetica, sans-serif;
}

4. 混合宏（Mixins） #

scss 
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

5. 继承 #

scss 
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

6. 运算 #

scss 
.container {
  width: 100%;
}

.article {
  width: 600px / 960px * 100%;
}

Sass 的优势 #

1. 提高开发效率 #

功能 CSS Sass
定义主题色 重复书写 使用变量
嵌套选择器 重复父选择器 自动嵌套
浏览器前缀 手动添加 Mixin 自动处理
响应式断点 重复媒体查询 Mixin 封装

2. 增强可维护性 #

scss 
// 统一管理变量
$breakpoints: (
  mobile: 576px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

// 使用函数获取
@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

3. 模块化开发 #

text 
styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   └── _footer.scss
└── main.scss

4. 强大的生态系统 #

  • Compass：成熟的 Mixin 库
  • Bourbon：轻量级 Mixin 库
  • Susy：响应式网格系统
  • Breakpoint：媒体查询简化

Sass vs 其他预处理器 #

Sass vs Less #

特性 Sass Less
实现 Dart JavaScript
变量 $var @var
作用域 块级 延迟加载
循环 支持 有限支持
函数 丰富 基础
社区 最大 较大

Sass vs Stylus #

特性 Sass Stylus
语法 严格 灵活
大括号 可选 可选
学习曲线 中等 较低
社区 最大 较小
文档 完善 一般

Sass 的应用场景 #

1. 大型项目 #

scss 
// 使用模块化组织代码
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'components/buttons';
@use 'layout/header';

2. 设计系统 #

scss 
// 设计令牌
$colors: (
  primary: (
    base: #3498db,
    light: lighten(#3498db, 10%),
    dark: darken(#3498db, 10%)
  ),
  secondary: (
    base: #2ecc71,
    light: lighten(#2ecc71, 10%),
    dark: darken(#2ecc71, 10%)
  )
);

3. 组件库 #

scss 
// 可配置的组件
@mixin button-variant($background, $color) {
  background-color: $background;
  color: $color;
  
  &:hover {
    background-color: darken($background, 10%);
  }
}

.btn-primary {
  @include button-variant(#3498db, #fff);
}

浏览器兼容性 #

Sass 编译后生成标准 CSS，因此：

  • 所有现代浏览器都支持
  • 无需担心兼容性问题
  • 可以使用任何 CSS 特性

学习建议 #

  1. 先掌握 CSS 基础：Sass 是 CSS 的扩展，扎实的 CSS 基础是前提
  2. 从变量开始：变量是最简单且最实用的功能
  3. 逐步学习：按照本指南的顺序循序渐进
  4. 多实践：在实际项目中使用 Sass
  5. 阅读源码：学习优秀项目的 Sass 代码

下一步 #

现在你已经了解了 Sass 是什么，接下来学习 安装配置，开始你的 Sass 之旅！

最后更新：2026-03-28