认识 CSS 预处理器

熟悉 CSS 语法之后，就可以开始使用 CSS 预处理器辅助撰写 CSS，这篇教学会介绍三种 CSS 预处理器：Less、Sass 和 SCSS，透过基本的介绍、简单的程序码示例和差异比较表格，让大家理解 CSS 预处理器的实用性和差异，进而增强 CSS 管理和编辑的能力。

快速导览：

• 什么是 CSS 预处理器？
• 主流的 CSS 预处理器：Less、Sass、SCSS
• Less、Sass 和 SCSS 的差异

什么是 CSS 预处理器？

CSS 预处理器是一种扩展 CSS 功能的脚本语言，可以提高 CSS 的可维护性和重用性，开发者能够更有效率的撰写程序码，CSS 预处理器虽然在提升样式编写效率和可维护性方面具有显著优势，但也伴随着学习和使用上的挑战。下方列出相关的优缺点比较：

优点：

• 变数：可以定义重复使用值（ 如颜色、字体大小等 ），让样式更具一致性和可维护性。
• 巢状语法：使用巢状结构，让程序码更具可读性，更容易理解样式的层级关系。
• 混合 ( Mixins )：将 CSS 样式属性封装并互相混合，方便重复使用。
• 运算函数：提供更多的运算函数，增加灵活性。
• 模组化：将样式分门别类在多个文件中，提高整体组织性和可维护性。

缺点：

• 学习曲线较长：对于新手来说，需要先掌握 CSS 才能有效掌握预处理器的语法。
• 编译过程有门槛：编译过程会增加开发流程的复杂性，并需要额外的工具和设定。
• 可能影响网页效能：使用预处理器可能会生成较大的 CSS 文件，影响网页效能。
• 可能过度依赖：开发者可能过度依赖预处理器，导致 CSS 变得过于复杂冗长。
• 本兼容性问题：预处理器的版本更新可能会导致某些功能的变更。

主流的 CSS 预处理器：Less、Sass、SCSS

目前主流的 CSS 预处理器有两种，分别是 Less 和 Sass，由于 Sass 的语法和 CSS 差异较大，因此许多网页开发者会转向使用 Sass 延伸出另外的语法 SCSS，以下使用效果完全相同的简单程序码，分别透过 Less、SCSS、Sass 预处理器撰写，最后会显示转换成的 CSS 长相，但需要注意，虽然使用预处理器撰写大量 CSS 时可能较为方便，最终仍然会转换成纯粹的 CSS，因此仍然不支援即时的动态数值更新。

Less：

@color-1: red;
@color-2: blue;
@size-30px: 20px;
h1 {color: @color-1;}
h2 {color: @color-2;}
.fn(){
  em {
    font-size: @size-30px;
    color: gray;
  }
}
.a {.fn();}
.b {.fn();}

SCSS：

$color-1: red;
$color-2: blue;
$size-30px: 20px;
h1 {color: $color-1;}
h2 {color: $color-2;}
@mixin fn {
  em {
    font-size: $size-30px;
    color: gray;
  }
}
.a { @include fn;}
.b {@include fn;}

Sass：

$color-1: red
$color-2: blue
$size-30px: 20px
h1
  color: $color-1
h2
  color: $color-2
=fn
  em
    font-size: $size-30px
    color: gray
.a
  +fn
.b
  +fn

等同 CSS 程序码

h1 {color: red;}
h2 {color: blue;}
.a em, .b em {
  font-size: 20px;
  color: gray;
}

Less、Sass 和 SCSS 的差异

Less、Sass 和 SCSS 预处理器的差异如下表所示：

小结

这篇教学介绍了 CSS 预处理器的基本概念及其优缺点，希望能让大家对这些 CSS 预处理器的功能和优势有了更深入的了解。

意见反馈