CSS预处理器与后处理器

CSS预处理器概述

CSS预处理器是一种扩展CSS功能的脚本语言，通过添加变量、嵌套规则、混合宏等特性，使CSS编写更加高效和可维护。常见的预处理器包括Sass、Less和Stylus，它们通过专门的编译器将预处理代码转换为标准CSS。

// Sass示例
$primary-color: #3498db;

.container {
  width: 100%;
  .box {
    background: $primary-color;
    &:hover {
      background: darken($primary-color, 10%);
    }
  }
}

主要预处理器特性

变量系统

预处理器允许定义可重用的变量，特别适合管理颜色方案、字体堆栈和间距值。Sass使用$符号声明变量，Less使用@符号。

// Less变量示例
@base-font-size: 16px;
@brand-color: #e74c3c;

body {
  font-size: @base-font-size;
  color: @brand-color;
}

嵌套规则

通过嵌套选择器可以直观地反映HTML结构，减少重复代码。Stylus的嵌套语法最为灵活，甚至可以省略大括号和分号。

// Stylus嵌套示例
nav
  ul
    margin 0
    padding 0
    li
      display inline-block
      a
        text-decoration none

混合宏(Mixins)

混合宏类似于函数，可以定义样式块并在多处调用。Sass的混合宏支持参数传递和默认值设置。

// Sass混合宏示例
@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

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

CSS后处理器解析

后处理器对已生成的CSS进行优化和转换，PostCSS是最典型的代表。它通过插件系统实现自动添加浏览器前缀、CSS压缩、未来语法转换等功能。

/* 输入CSS */
:fullscreen a {
  display: flex;
}

/* 经过Autoprefixer处理后 */
:-webkit-full-screen a {
  display: -webkit-box;
  display: flex;
}

核心后处理技术

自动前缀

Autoprefixer插件根据Can I Use数据自动添加所需的前缀，确保跨浏览器兼容性。

// 浏览器配置示例
{
  "browserslist": [
    "last 2 versions",
    "> 1%"
  ]
}

CSS模块化

PostCSS的模块化插件可以将类名局部化，避免全局命名冲突，特别适合组件化开发。

/* 输入 */
.nav {
  color: var(--primary);
}

/* 输出 */
.Nav__nav___2h3jK {
  color: #3498db;
}

未来语法支持

PostCSS预设环境(preset-env)允许开发者使用CSS新特性，如嵌套规则和自定义属性，并自动转换为当前浏览器支持的语法。

/* 未来CSS语法 */
@custom-media --viewport-medium (width <= 50rem);

@media (--viewport-medium) {
  body { font-size: calc(1rem + 1vw); }
}

预处理器与后处理器协作

现代前端工作流中，两者通常配合使用。预处理器处理样式编写阶段的扩展功能，后处理器则对输出结果进行优化和兼容处理。

// 典型构建配置示例
module.exports = {
  plugins: [
    require('precss')(),
    require('autoprefixer')(),
    require('cssnano')()
  ]
}

性能与调试考量

预处理器的嵌套层级过深会导致生成的CSS选择器过于具体，影响渲染性能。后处理器虽然能优化输出，但构建流程会增加复杂度。

// 不推荐的深层嵌套
.page {
  .content {
    .article {
      .title {
        // 生成的选择器为 .page .content .article .title
      }
    }
  }
}

现代CSS替代方案

随着CSS自定义属性(CSS Variables)和CSS嵌套规范的普及，原生CSS正在吸收预处理器的许多特性。

/* 原生CSS变量 */
:root {
  --main-color: #3498db;
}

.element {
  color: var(--main-color);
}

/* 原生CSS嵌套(草案) */
.parent {
  & .child {
    color: red;
  }
}