CSS学习笔记(六)：CSS预处理器 - 实践

CSS 预处理器概述

CSS 预处理器是一种脚本语言，通过扩展 CSS 的功能（如变量、嵌套、混合等）生成标准 CSS 代码。主流的预处理器包括 Sass、Less 和 Stylus，它们提升了代码可维护性和开发效率。

---

主流 CSS 预处理器

Sass (Syntactically Awesome Style Sheets)

• 语法扩展：支持 .scss（兼容 CSS 语法）和 .sass（缩进语法）。
• 功能特性：
  • 变量：$primary-color: #333;
  • 嵌套规则：

    nav {ul { margin: 0; }a { color: $primary-color; }
    }

  • 混合（Mixins）：

    @mixin flex-center {display: flex;justify-content: center;
    }
    .box { @include flex-center; }

  • 继承与条件逻辑：支持 @extend 和 @if/@else。

    .error {border: 1px solid red;
    }
    .serious-error {@extend .error;font-weight: bold;
    }

Less

• 语法：类似 Sass 的 .scss，但基于 JavaScript 运行时编译。
• 特性：
  • 变量：@primary-color: #333;
  • 嵌套与运算：支持颜色运算（如 @light-color: @primary-color + #111;）。
  • 混合：可直接调用类名作为混合。

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

Stylus

• 灵活性：省略花括号和分号，支持多种语法风格。
• 特性：
  • 变量：可省略 $ 或 @（如 primary-color = #333）。
  • 混合：支持隐式调用（类似函数）。

    border-radius(radius)-webkit-border-radius radiusborder-radius radius
    .boxborder-radius(10px)

---

预处理器核心功能对比

功能	Sass	Less	Stylus
变量前缀	$	@	可选
嵌套语法	支持	支持	支持
混合	@mixin/@include	类名调用	隐式调用
条件逻辑	@if/@else	有限支持	支持
编译依赖	Ruby/Node.js	JavaScript	Node.js

---

如何选择预处理器

• 项目需求：
  • Sass：适合复杂项目，需要高级功能（如循环、模块化）。
  • Less：适合前端工具链基于 JavaScript（如旧版 Bootstrap）。
  • Stylus：偏好简洁语法的开发者。
• 工具兼容性：
  • Sass 与 Webpack、Gulp 等构建工具集成广泛。
  • Less 可直接在浏览器中运行（开发阶段）。

---

编译与工具链

预处理器需通过工具转换为 CSS：

• Sass：使用 dart-sass 或 node-sass（已废弃）。

  npm install sass --save-dev
  sass input.scss output.css

• Less：通过 lessc 编译。

  npm install less -g
  lessc styles.less styles.css

• Stylus：使用 stylus 命令行工具。

---

现代 CSS 替代方案

随着 CSS 原生支持变量（--var）和 @nest 规则，部分场景可替代预处理器，但预处理器的逻辑控制和模块化仍具优势。