Sass Compass详细教程，从入门到精通该怎么做？

Sass & Compass 详细教程

目录

1. 引言：为什么需要 Sass 和 Compass？
2. 第一部分：Sass 基础
   • 1 什么是 Sass？
   • 2 安装 Sass
   • 3 核心功能
     • 3.1 变量
     • 3.2 嵌套
     • 3.3 混入
     • 3.4 继承 / @extend
     • 3.5 函数与运算
     • 3.6 条件语句与循环
     • 3.7 模块化 / @use 和 @forward
3. 第二部分：Compass 进阶
   • 1 什么是 Compass？
   • 2 安装与配置 Compass
   • 3 Compass 的核心：Mixins
   • 4 Compass 的其他强大功能
     • 4.1 图像精灵
     • 4.2 交叉浏览器前缀
     • 4.3 颜色函数
     • 4.4 重置样式
4. 第三部分：工作流与最佳实践
   • 1 项目结构
   • 2 编译 Sass
     • 命令行编译
     • 使用 GUI 工具 (如 CodeKit, Prepros)
     • 在项目中集成 (如 Gulp, Webpack, Vite)
   • 3 最佳实践
5. 第四部分：现代化替代方案与未来
   • 1 PostCSS：新时代的 CSS 处理器
   • 2 Autoprefixer：为什么它比 Compass 的前缀更好？
   • 3 为什么现在很少有人直接用 Compass？
   • 4 现代 Sass 生态：工具库和框架

---

引言：为什么需要 Sass 和 Compass？

在 Sass 和 Compass 出现之前，CSS 是一门非编程、非动态的样式表语言,开发者面临着许多痛点：

• 代码重复：大量重复的颜色值、尺寸、选择器。
• 维护困难：修改一个主题色需要在几十个地方改动。
• 缺乏逻辑：无法使用变量、条件判断、循环等编程逻辑。
• 浏览器兼容性：需要手动为不同浏览器添加 -webkit-, -moz- 等前缀。
• 资源管理：管理多个小图标文件很麻烦，手动合并成“雪碧图”（Sprite）非常耗时。

Sass (Syntactically Awesome Style Sheets) 的出现解决了前三个问题，它为 CSS 赋予了编程能力，而 Compass 则是一个基于 Sass 的框架，它利用 Sass 的能力，解决了后两个问题（兼容性和资源管理），并提供了一套强大、可复用的 Mixin 库。

• Sass 是一把锋利的“刀”，让你能更高效、更优雅地写 CSS。
• Compass 是一个专业的“刀具套装”，在这把刀的基础上，提供了处理各种复杂任务的专用工具（如兼容性前缀、图像精灵等）。

---

第一部分：Sass 基础

1 什么是 Sass？

Sass 是一种 CSS 预处理器，它允许你用一种更强大、更具表现力的语言（称为 Sass 语法）来编写样式，然后通过编译器将其转换为标准、可读的 CSS 代码。

Sass 有两种语法：

1. SCSS (Sassy CSS)：这是目前的主流语法，它的语法和 CSS 非常相似，所有有效的 CSS 代码也是有效的 SCSS 代码，文件扩展名为 .scss。
2. Indented Syntax (Sass)：一种更简洁、缩进式的语法，没有花括号和分号，文件扩展名为 .sass。

本教程主要使用更通用的 SCSS 语法。

2 安装 Sass

你需要先安装 Node.js，然后通过 npm (Node Package Manager) 来安装 Sass。

1. 安装 Node.js: 访问 Node.js 官网 下载并安装 LTS (长期支持) 版本。
2. 打开终端/命令行工具。
3. 全局安装 Sass:

   npm install -g sass

   安装完成后，你可以通过 sass --version 来检查是否安装成功。

3 核心功能

3.1 变量

使用 符号定义变量，用于存储颜色、字体、尺寸等信息。

// 定义变量
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$border-radius: 5px;
// 使用变量
body {
  font-family: $font-stack;
  color: $primary-color;
}
.button {
  background-color: $primary-color;
  border-radius: $border-radius;
  border: none;
  padding: 10px 15px;
  color: white;
}

编译后的 CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
}
.button {
  background-color: #3498db;
  border-radius: 5px;
  border: none;
  padding: 10px 15px;
  color: white;
}

3.2 嵌套

允许将选择器嵌套在另一个选择器内部，使代码结构更清晰，反映了 HTML 的层级关系。

注意：避免过度嵌套，建议不超过 3 层，Sass 提供了 & 符号来代表父选择器。

nav {
  background-color: #333;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      margin-right: 10px;
      a {
        color: white;
        text-decoration: none;
        &:hover { // & 代表 nav ul li a
          text-decoration: underline;
        }
      }
    }
  }
}

编译后的 CSS:

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

3.3 混入

Mixins 可以让你定义一组可重用的 CSS 属性，甚至可以接收参数和默认值，它们是 Sass 中最强大的功能之一。

// 定义一个带参数的 Mixin
@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
// 使用 Mixin
.box {
  @include border-radius(10px);
  background-color: #f0f0f0;
  padding: 20px;
}
.button {
  @include border-radius; // 使用默认值 5px
}

编译后的 CSS:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  background-color: #f0f0f0;
  padding: 20px;
}
.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

3.4 继承 / @extend

@extend 允许你让一个选择器继承另一个选择器的所有样式，这比 Mixin 更适合用于语义化地共享样式。

// 定义一个基础样式
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// 让 .success 和 .error 继承 .message 的样式
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}

编译后的 CSS:

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

@extend 会将选择器分组，生成更高效的 CSS，而不是像 Mixin 那样简单地复制代码。

3.5 函数与运算

Sass 内置了许多函数（如颜色操作、字符串处理、数字运算等）,并支持标准的数学运算。

$base-spacing: 10px;
.container {
  margin: $base-spacing * 2;
  padding: $base-spacing;
}
$primary-color: #3498db;
.highlight {
  background-color: lighten($primary-color, 20%); // 变亮 20%
  border-color: darken($primary-color, 10%);   // 变暗 10%
}

编译后的 CSS:

.container {
  margin: 20px;
  padding: 10px;
}
.highlight {
  background-color: #5dade2;
  border-color: #2874a6;
}

3.6 条件语句与循环

Sass 支持 @if, @else if, @else 和 @for, @each, @while 循环。

// @if
$theme: 'dark';
body {
  @if $theme == 'dark' {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #333;
  }
}
// @for
@for $i from 1 through 3 {
  .item-#{$i} { // #{} 是插值语法
    width: 10px * $i;
  }
}
// @each
$animals: puma, sea-slug, egret, salamander;
@each $animal in $animals {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后的 CSS:

body {
  background-color: #333;
  color: #fff;
}
.item-1 {
  width: 10px;
}
.item-2 {
  width: 20px;
}
.item-3 {
  width: 30px;
}
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

3.7 模块化 / @use 和 @forward

现代 Sass (Dart Sass) 推荐使用 @use 和 @forward 来组织代码，取代了旧的 @import。

• @use: 用于引入其他 Sass 文件（模块），每个模块只会加载一次，并创建一个独立的命名空间,避免了样式重复和变量污染。
• @forward: 用于将一个模块的变量、Mixins 和函数转发给另一个模块，可以构建更清晰的公共 API。

@import 的问题：它会将引入文件的所有内容复制到当前位置，多次引入同一个文件会导致代码重复，且所有变量和 Mixins 都会污染全局命名空间。

@use 的示例:

假设你有两个文件： _variables.scss (下划线表示不直接编译为 CSS)

$primary-color: #3498db;

_buttons.scss

@use 'variables'; // 引入 variables 模块
.button {
  background-color: variables.$primary-color; // 通过命名空间访问
}

---

第二部分：Compass 进阶

1 什么是 Compass？

Compass 是一个开源的 CSS 框架，它构建在 Sass 之上，它提供了大量的预定义 Mixin 和函数，旨在帮助开发者快速编写跨浏览器、可维护的 CSS，它解决了 Sass 本身不包含的一些实际问题,尤其是：

• 浏览器前缀：自动为需要兼容的 CSS 规则添加 -webkit-, -moz-, -ms-, -o- 前缀。
• 图像精灵：自动将多个小图标合并成一张大图，并生成对应的 CSS 类。
• 重置样式：提供多种流行的 CSS 重置方案（如 Normalize.css）。
• 辅助函数：提供颜色计算、图片路径处理等实用函数。

2 安装与配置 Compass

Compass 的安装比 Sass 稍微复杂一些，因为它依赖于 Ruby 环境。

1. 安装 Ruby:
   • Windows: 下载并安装 RubyInstaller。
   • macOS: 通常已经预装，在终端输入 ruby -v 检查，如果没有，可以使用 brew install ruby。
2. 安装 Compass: 在终端中运行以下命令来全局安装 Compass：

   gem install compass

3. 创建 Compass 项目:

   compass create my_project

   这会创建一个标准的项目结构：

   my_project/
   ├── config.rb         # Compass 的配置文件
   ├── sass/
   │   ├── ie.scss
   │   ├── screen.scss   # 主样式文件
   │   └── print.scss
   └── stylesheets/      # 编译后的 CSS 文件存放位置

3 Compass 的核心：Mixins

Compass 的价值主要体现在其强大的 Mixin 库中。

示例：使用 Compass 的圆角 Mixin

// 在你的 .scss 文件顶部引入 Compass 的核心库
@import "compass/css3";
.button {
  @include border-radius(10px);
}

Compass 的 border-radius Mixin 会自动检测浏览器是否需要前缀，并生成相应的 CSS。

编译后的 CSS:

.button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

其他常用 Compass Mixin:

• @include box-shadow(...)
• @include linear-gradient(...)
• @include transition(...)
• @include opacity(...)

4 Compass 的其他强大功能

4.1 图像精灵

这是 Compass 的“杀手级”功能。

1. 创建图标文件夹: 在 images/sprites/ 目录下放置你的小图标，home.png, search.png, user.png。

2. 配置 config.rb:

   # 在 config.rb 中添加
   require 'compass/import-once/activate'
   http_path = "/"
   css_dir = "stylesheets"
   sass_dir = "sass"
   images_dir = "images"
   generated_images_dir = images_dir + "/generated" // 生成的精灵图存放位置
   javascripts_dir = "javascripts"
   # 配置精灵图
   sprite map: $icons, sprites: {
       home: (x: 0, y: 0),
       search: (x: 0, y: 50),
       user: (x: 0, y: 100)
   }

   注意：新版 Compass 的配置方式有所不同，更推荐使用 @import 方式。

3. 在 Sass 中使用:

   @import "compass/utilities/sprites";
   @import "icons/*.png"; // * 会匹配所有图标
   @include all-icons-sprites; // 生成所有精灵图相关的 CSS

编译后的 CSS (会自动生成):

.icons-sprite, .icons-home, .icons-search, .icons-user {
  background-image: url('/images/icons-s12345678.png');
  background-repeat: no-repeat;
}
.icons-home {
  background-position: 0 0;
}
.icons-search {
  background-position: 0 -50px;
}
.icons-user {
  background-position: 0 -100px;
}

4.2 交叉浏览器前缀

除了 border-radius，Compass 还为几乎所有需要前缀的 CSS3 属性都提供了 Mixin。

@import "compass/css3";
.my-box {
  @include box-shadow(0 0 10px rgba(0,0,0,0.5));
  @include transition(all 0.3s ease-in-out);
}

4.3 颜色函数

Compass 提供了比 Sass 更丰富的颜色函数，compass-colors 模块。

4.4 重置样式

Compass 内置了多种重置样式,你可以轻松引入。

@import "compass/reset"; // 引入 Compass 重置
// 或者
@import "normalize"; // 引入 Normalize.css

---

第三部分：工作流与最佳实践

1 项目结构

一个典型的 Sass/Compass 项目结构：

my-project/
├── config.rb              # Compass 配置文件
├── index.html             # HTML 入口文件
├── sass/
│   ├── abstracts/         # 存放变量、Mixins、函数、工具类
│   │   ├── _variables.scss
│   │   ├── _mixins.scss
│   │   └── _functions.scss
│   ├── base/              # 存放基础样式，如重置、body、h1-h6
│   │   ├── _reset.scss
│   │   └── _typography.scss
│   ├── components/        # 存放组件样式，如按钮、导航、卡片
│   │   ├── _buttons.scss
│   │   ├── _nav.scss
│   │   └── _cards.scss
│   ├── layout/            # 存放布局样式，如头部、底部、网格
│   │   ├── _header.scss
│   │   ├── _footer.scss
│   │   └── _grid.scss
│   ├── pages/             # 存放特定页面的样式
│   │   └── _home.scss
│   └── vendor/            # 存放第三方库的 Sass 源码
│       └── _compass.scss
└── stylesheets/           # 编译后的 CSS 文件
    └── main.css

2 编译 Sass

有三种主要方式来编译 Sass 文件：

1. 命令行编译:

   • 监视模式: 这是最常用的方式，它会监视 .scss 文件的变化，并自动编译。

     compass watch

   • 一次性编译:

     compass compile

2. 使用 GUI 工具: 像 CodeKit, Prepros, Live Sass Compiler (VS Code 插件) 这样的图形界面工具，可以让你通过点击按钮来启动监视和编译,非常方便。

3. 在项目中集成: 这是现代前端开发的标准做法。

   • Gulp/Grunt: 使用 gulp-sass 或 grunt-contrib-sass 插件。
   • Webpack: 使用 sass-loader 和 css-loader。
   • Vite: 开箱即支持 Sass,无需额外配置。

3 最佳实践

• 模块化: 始终使用 @use 和 @forward 来组织代码,避免全局污染。
• 命名约定: 使用 BEM (Block, Element, Modifier) 或 SMACSS 等方法论来命名你的类,避免样式冲突。
• 文件命名: 使用 _ 前缀来表示“部分文件”（Partial），这些文件不会被 Compass 直接编译。
• 注释: 使用 Sass 的多行注释 来记录代码，这些注释会保留在编译后的 CSS 中，单行注释 会被过滤掉。
• 性能: 谨慎使用 @extend 和 @for 循环，它们可能会生成大量 CSS，影响性能，优先考虑使用 Mixin。

---

第四部分：现代化替代方案与未来

虽然 Sass 和 Compass 在过去是行业标准，但技术总是在发展,今天的前端生态已经有了更优的解决方案。

1 PostCSS：新时代的 CSS 处理器

PostCSS 本身不是一个预处理器，它是一个用 JavaScript 工具来转换 CSS 的平台，它的核心思想是：让你的 CSS 也能用上 JavaScript 的生态。

你可以在 PostCSS 中使用插件来实现各种功能，

• Autoprefixer: 自动添加浏览器前缀。
• CSS Variables: 支持 CSS 变量。
• Preset-env: 像 Babel for JavaScript 一样，让你用未来的 CSS 语法，然后自动转换成兼容性好的 CSS。

2 Autoprefixer：为什么它比 Compass 的前缀更好？

Autoprefixer 是 PostCSS 生态中最流行的插件，它负责添加浏览器前缀，它比 Compass 的前缀功能更强大,因为：

• 基于数据驱动: Autoprefixer 读取的是 Can I Use 网站上的实际使用数据，而不是写死的规则列表,这意味着它能更准确地判断哪些属性在哪些浏览器版本上需要前缀。
• 配置灵活: 你可以指定需要兼容的浏览器版本（如 last 2 versions, > 1%, ie >= 11），Autoprefixer 会智能地只添加必要的前缀。
• 与构建工具无缝集成: 在 Webpack, Vite, Gulp 等现代构建工具中集成 PostCSS 和 Autoprefixer 非常简单。

3 为什么现在很少有人直接用 Compass？

1. 依赖过时: Compass 严重依赖 Ruby，而现代前端开发工具链几乎完全基于 Node.js。
2. 生态迁移: 大量的 Mixin 功能（如前缀、重置）已经被更现代、更灵活的工具（如 PostCSS 插件）所取代。
3. 维护问题: Compass 的核心团队活跃度下降，其项目发展速度远不如 Sass 和 PostCSS 生态。
4. 功能重叠: Sass 本身已经吸收了很多 Compass 的优秀思想（如 @use 的模块化）,而其他功能可以通过更轻量的插件实现。

注意: Sass 官方推出的 Dart Sass 已经成为了事实上的标准，它是一个用 Dart 语言编写的 Sass 实现，比旧的 Ruby Sass (Compass 依赖的) 快得多,并且是未来发展的方向。

4 现代 Sass 生态：工具库和框架

虽然 Compass 时代过去了，但基于 Sass 的工具库依然非常活跃，开发者不再依赖一个“全家桶”框架,而是选择性地引入自己需要的库：

• SassC/Sass: 核心 Sass 编译器。
• PostCSS + Autoprefixer: 处理浏览器兼容性的标准方案。
• 工具库:
  • Bourbon: 一个轻量级的 Sass Mixin 库，提供高质量的、不带任何偏见的 Mixin。
  • Susy: 一个强大的网格布局框架。
  • Breakpoint: 用于管理响应式断点的工具。
  • Sass Maps: 利用 Sass 的 Map 数据结构来管理设计令牌（颜色、字体等）。

---

特性	Sass	Compass
定位	CSS 预处理器	基于 Sass 的 CSS 框架
核心功能	变量、嵌套、Mixins、继承、函数等编程能力	在 Sass 基础上，提供大量预定义 Mixin 和工具
主要优势	提升代码的可维护性、复用性和逻辑性	解决浏览器兼容性、图像精灵等实际问题
依赖	Node.js	Ruby
现状	非常活跃，是现代 Web 开发的基石	逐渐被淘汰，功能被 PostCSS 等现代工具替代
现代工作流	Sass (Dart Sass) + PostCSS + Autoprefixer + 构建工具	Sass + Compass

给你的建议：

• 如果你是初学者：必须学好 Sass，它是现代前端开发者的必备技能，从变量、嵌套、Mixins 开始,掌握其核心概念。
• 如果你在维护一个老项目：你可能会遇到 Compass，了解它的基本用法（如 @import "compass" 和使用其 Mixin）即可。
• 如果你要开始一个新项目：请拥抱现代生态。
  1. 使用 Sass (Dart Sass) 作为你的 CSS 预处理器。
  2. 使用 PostCSS 和 Autoprefixer 来处理浏览器兼容性。
  3. 使用 Vite 或 Webpack 等现代构建工具来管理你的项目。
  4. 根据需要，选择性地引入轻量级的 Sass 工具库（如 Bourbon），而不是使用 Compass 这个“重武器”。

Sass 的思想永存，但 Compass 作为其历史上一个重要的“工具箱”，已经完成了它的历史使命,光荣地退居幕后。