CSS 进阶

概述

CSS（Cascading Style Sheets）作为 Web 前端技术的三大基石之一，已经从简单的样式描述语言演变为功能丰富、体系复杂的样式系统。在实际的企业级项目开发中，仅靠原生 CSS 往往难以应对大型项目的维护需求——代码复用性差、作用域污染、缺乏变量与逻辑支持等问题会随着项目规模的增长而急剧放大。

本文将深入探讨 CSS 领域的四项核心技术方案：Sass/SCSS 预处理器、PostCSS、CSS Modules 和 CSS-in-JS，同时分析 CSS 自定义属性（变量） 与预处理器的对比关系，帮助开发者在不同场景下做出合理的技术选型。

一、Sass/SCSS 预处理器

Sass（Syntactically Awesome Style Sheets）是最早诞生且生态最成熟的 CSS 预处理器之一。它引入了编程语言的核心概念，极大地提升了样式代码的组织能力和复用性。

1.1 变量

Sass 变量以 $ 符号开头，用于存储颜色、字体、尺寸等常用值，便于统一管理和主题定制。

scss

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$base-spacing: 8px;

.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: $base-spacing $base-spacing * 2;
}

相较于原生 CSS 自定义属性，Sass 变量是编译时的实体，编译完成后即被替换为具体值，不占用运行时性能。

1.2 嵌套

嵌套规则反映了 HTML 的层级结构，减少了重复选择器的书写。

scss

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;

  &__header {
    padding: 16px;
    border-bottom: 1px solid #eee;
  }

  &__body {
    padding: 16px;
  }

  &--highlighted {
    border-color: $primary-color;
    box-shadow: 0 2px 8px rgba($primary-color, 0.2);
  }
}

& 符号表示父选择器引用，配合 BEM（Block Element Modifier）命名法可以写出结构清晰的样式代码。

1.3 Mixin

Mixin 是可复用的样式块，支持参数传递，适合处理需要动态生成样式规则的场景。

scss

@mixin respond-to($breakpoint) {
  @if $breakpoint == sm {
    @media (max-width: 576px) { @content; }
  } @else if $breakpoint == md {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == lg {
    @media (max-width: 992px) { @content; }
  }
}

@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

.navbar {
  @include flex-center;
  padding: 0 24px;

  @include respond-to(md) {
    flex-direction: column;
  }
}

Mixin 通过 @include 指令引入，编译时会将样式代码复制到引用位置。使用 @content 可以让调用者向 mixin 内部注入额外的样式。

1.4 @extend（继承）

@extend 允许一个选择器继承另一个选择器的全部样式规则，编译后通过选择器分组（逗号分隔）来实现。

scss

%button-base {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  @extend %button-base;
  background-color: #3498db;
  color: #fff;
}

.btn-danger {
  @extend %button-base;
  background-color: #e74c3c;
  color: #fff;
}

% 开头的占位符选择器不会被编译为实际的 CSS 类，只作为被继承的模板存在。与 Mixin 相比，@extend 在生成重复规则时更节省代码体积，但使用时需注意选择器层级带来的特殊性（Specificity）问题。

1.5 函数

Sass 内置了大量实用的函数，涵盖颜色处理、数值计算、字符串操作等，同时支持自定义函数。

scss

// 自定义函数
@function spacing($multiplier) {
  @return $base-spacing * $multiplier;
}

// 使用内置颜色函数
.alert {
  background-color: lighten($primary-color, 35%);
  color: darken($primary-color, 15%);
  padding: spacing(2);
}

常用内置函数包括：lighten、darken、mix、rgba、if、map-get 等，可以有效减少重复的样式计算。

1.6 @use 和 @forward 模块系统

Sass 从 Dart Sass 开始引入了全新的模块系统，使用 @use 替代旧的 @import，解决了全局命名冲突、私有成员、重复加载等问题。

scss

// _variables.scss
$primary: #3498db !default;
$danger: #e74c3c !default;

// _mixins.scss
@use 'variables' as v;

@mixin button-variant($color) {
  background-color: $color;
  border: 1px solid darken($color, 10%);
}

// main.scss
@use 'variables';
@use 'mixins';

.btn {
  @include mixins.button-variant(variables.$primary);
}

@forward 可以将多个模块统一转发，适合构建入口文件：

scss

// _index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// app.scss
@use 'index' as lib;

.element {
  color: lib.$primary;
}

使用 @use 引入的模块默认带有命名空间，可以通过 as * 去除。以 _ 开头的文件是 Sass 的部分文件（Partial），不会被单独编译为 CSS。

二、PostCSS

PostCSS 是一个使用 JavaScript 插件转换 CSS 的工具。它不是 CSS 预处理器，而是一个工具平台——通过插件机制对 CSS 进行各种分析和转换。

2.1 Autoprefixer

Autoprefixer 是 PostCSS 生态中使用最广泛的插件，它根据 Can I Use 数据自动为 CSS 规则添加浏览器厂商前缀。

css

/* 输入 */
::placeholder {
  color: #999;
}

/* 输出 */
::-moz-placeholder {
  color: #999;
}
::-webkit-input-placeholder {
  color: #999;
}
::placeholder {
  color: #999;
}

通过配置 browserslist（在 package.json 中或独立的 .browserslistrc 文件），可以精确控制支持的浏览器范围：

json

{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ]
}

2.2 postcss-preset-env

postcss-preset-env 允许开发者使用未来的 CSS 语法（CSS 规范中处于 Stage 1–4 的特性），并将其转换为当前浏览器兼容的形式。

css

/* 输入：使用嵌套和自定义媒体查询 */
:root {
  --brand-color: #3498db;
}

.card {
  border: 1px solid color-mix(in srgb, var(--brand-color) 30%, white);

  & .title {
    color: var(--brand-color);
  }
}

@custom-media --viewport-narrow (width <= 768px);

@media (--viewport-narrow) {
  .card { font-size: 14px; }
}

postcss-preset-env 包含了 Autoprefixer 的功能，并通过 stage 参数控制启用哪些阶段的 CSS 特性。

2.3 插件生态

PostCSS 拥有丰富的插件生态，以下是一些常用插件：

插件	功能
`autoprefixer`	自动添加浏览器前缀
`postcss-preset-env`	转换未来的 CSS 语法
`cssnano`	CSS 压缩与优化
`postcss-import`	处理 `@import` 语句，合并 CSS
`postcss-nested`	支持嵌套语法（类似 Sass）
`stylelint`	CSS 代码规范检查
`postcss-pxtorem`	将 px 转换为 rem
`postcss-custom-properties`	polyfill 自定义属性

PostCSS 的核心设计哲学是小而专注——每个插件只做一件事，开发者按需组合，避免了像 Sass 那样必须接受一整套工具链。

2.4 在构建工具中使用

PostCSS 可以无缝集成到主流构建工具中：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env')({ stage: 2 }),
    require('cssnano')({ preset: 'default' }),
  ],
};

在 Vite 中，PostCSS 开箱即用，只需在项目根目录放置 postcss.config.js 即可。在 Webpack 中，则通过 postcss-loader 集成到 CSS 处理流程。

三、CSS Modules

CSS Modules 是一种编译时的 CSS 作用域隔离方案，通过为每个类名生成唯一的哈希字符串来阻止样式冲突。

3.1 原理

在构建过程中，CSS Modules 会将 CSS 文件中的类名转换为哈希格式的标识符，同时生成一个映射对象（JSON），JavaScript 通过该映射对象引用实际的类名。

css

/* styles.module.css */
.button {
  background-color: #3498db;
  color: white;
  padding: 8px 16px;
}

.buttonLarge {
  padding: 16px 32px;
  font-size: 18px;
}

编译后类名会被转换为类似 _button_abc123 或 Button_button_1a2b3c 的形式，确保全局唯一性。

3.2 在 React 中使用

tsx

import styles from './Button.module.css';

function Button({ large, children }) {
  return (
    <button
      className={`${styles.button} ${large ? styles.buttonLarge : ''}`}
    >
      {children}
    </button>
  );
}

React 生态中常结合 classnames 或 clsx 库来简化条件类名的拼接：

tsx

import cn from 'clsx';
import styles from './Button.module.css';

function Button({ variant = 'primary', size = 'md', children }) {
  return (
    <button className={cn(styles.button, styles[variant], styles[size])}>
      {children}
    </button>
  );
}

3.3 在 Vue 中使用

Vue SFC（单文件组件）天然支持 CSS Modules，通过 <style module> 启用：

vue

<template>
  <button :class="$style.button">Click me</button>
</template>

<style module>
.button {
  background-color: #42b883;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
}
</style>

Vue 3 中还支持组合式 API 的 useCssModule：

vue

<script setup>
import { useCssModule } from 'vue';
const style = useCssModule();
</script>

<template>
  <button :class="style.button">Click me</button>
</template>

3.4 CSS Modules 的优势与局限

优势：

局部作用域隔离，彻底解决类名冲突
编译时处理，无运行时开销
可与预处理器（Sass/Less）配合使用
组件化语义清晰，样式与组件一一对应

局限：

全局样式仍需单独处理（使用 :global 选择器）
动态样式不够灵活（仍需内联样式或 CSS 自定义属性辅助）
类名不可预测，调试时需开启 Source Map 或配置有意义的命名规则

四、CSS-in-JS

CSS-in-JS 是指在 JavaScript 文件中以编程方式编写 CSS 样式的技术方案。最具代表性的库是 styled-components 和 Emotion。

4.1 styled-components

styled-components 使用标签模板字面量（Tagged Template Literals）来定义样式化组件：

tsx

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? '#3498db' : '#95a5a6'};
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: ${props => props.size === 'lg' ? '18px' : '14px'};
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  ${props => props.fullWidth && `
    width: 100%;
    display: block;
  `}
`;

const Wrapper = styled.div`
  display: flex;
  gap: 16px;
  padding: 24px;
`;

styled-components 在运行时会将样式字符串解析为 CSS，生成唯一的类名并注入到 <head> 中。

4.2 Emotion

Emotion 提供了类似的 API，同时支持 css prop 的方式：

tsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
`;

const primaryButton = css`
  ${buttonStyle}
  background-color: #e74c3c;
`;

function Button({ primary, children }) {
  return (
    <button css={primary ? primaryButton : buttonStyle}>
      {children}
    </button>
  );
}

Emotion 提供了框架无关的核心包 @emotion/css，以及与 React 深度集成的 @emotion/react 和 @emotion/styled。

4.3 利弊分析

优势：

组件内聚性高：样式、逻辑、模板位于同一文件，便于组件化开发
动态样式能力极强：可以直接读取组件的 props、state 和 context 来决定样式
无全局污染：自动生成唯一类名，样式隔离天然实现
死代码消除：没有使用的样式组件不会生成对应的 CSS
主题机制完善：通过 ThemeProvider 可以统一管理主题变量

劣势：

运行时开销：样式字符串需要在运行时解析和注入，影响首次渲染性能
Bundle 体积增加：库代码（如 styled-components 约 12KB gzipped）和动态生成的 CSS 字符串都会增加打包体积
React DevTools 嵌套过深：大量 styled 组件会使组件树层级变深，影响调试体验
SSR 配置复杂：服务端渲染需要额外配置样式提取
学习成本：团队成员需要理解 JavaScript 中的 CSS 语法和 API

五、CSS 自定义属性（变量）

CSS 自定义属性（Custom Properties）是 CSS 原生支持的变量机制，通过 -- 前缀定义，使用 var() 函数引用。

5.1 基本语法

css

:root {
  --color-primary: #3498db;
  --color-danger: #e74c3c;
  --spacing-unit: 8px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --font-size-base: 16px;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

5.2 与预处理器变量的关键区别

特性	Sass 变量	CSS 自定义属性
计算时机	编译时	运行时
作用域	文件作用域（编译后消失）	DOM 级联作用域（继承）
动态修改	不可（编译后即固定）	可通过 JavaScript 实时修改
媒体查询内重置	支持	支持
动画/过渡	不支持	完全支持
浏览器兼容	需编译为普通 CSS	现代浏览器全面支持
类型限制	无（数值、颜色、字符串等均可）	值类型有限（最终渲染为 CSS 值）

5.3 JavaScript 动态操作

CSS 自定义属性最大的优势在于可以在运行时通过 JavaScript 修改：

const root = document.documentElement;

// 设置主题色
root.style.setProperty('--color-primary', '#e67e22');

// 读取自定义属性
const primary = getComputedStyle(root).getPropertyValue('--color-primary');

// 批量更新主题
function setTheme(theme) {
  const themes = {
    light: {
      '--bg': '#ffffff',
      '--text': '#333333',
      '--border': '#e0e0e0',
    },
    dark: {
      '--bg': '#1a1a2e',
      '--text': '#eeeeee',
      '--border': '#333333',
    },
  };

  const vars = themes[theme];
  Object.entries(vars).forEach(([key, value]) => {
    root.style.setProperty(key, value);
  });
}

5.4 与预处理器结合使用

在实际项目中，CSS 自定义属性和预处理器并非互斥关系，而是互补的：

scss

$color-primary: #3498db;
$color-danger: #e74c3c;

:root {
  --color-primary: #{$color-primary};
  --color-danger: #{$color-danger};
  --color-bg: #ffffff;
  --color-text: #333333;
}

.button {
  // 使用 Sass 变量处理编译时逻辑
  @include respond-to(sm) {
    width: 100%;
  }

  // 使用 CSS 自定义属性处理运行时动态切换
  background-color: var(--color-primary);
  color: var(--color-text);
}

通过将 Sass 变量嵌入到 CSS 自定义属性中，既能享受预处理器的编译时便利，又能保留运行时的动态能力。

六、四种 CSS 方案对比总结

下表从多个维度对四种主流 CSS 方案进行横向对比：

维度	Sass/SCSS	PostCSS	CSS Modules	CSS-in-JS
本质	预处理器	工具平台	作用域隔离方案	运行时方案
变量机制	编译时变量	取决于插件	无（配合其他方案）	JS 变量
作用域隔离	需 BEM 等命名约定	需配合 CSS Modules	自动哈希隔离	自动生成唯一类名
动态样式	不支持运行时	不支持运行时	受限	原生支持（Props/State）
代码复用	Mixin / Extend	取决于插件	需配合预处理器	组件组合
运行时性能	无开销	无开销	无开销	有解析和注入开销
构建体积	增加编译产物	取决于插件配置	增加映射文件	增加库体积
学习成本	中（需学 Sass 语法）	低（Config 即用）	低（概念简单）	中（新编程范式）
调试体验	需 Source Map	需 Source Map	需 Source Map	需 Babel 插件
TypeScript 支持	无直接支持	无直接支持	需类型定义	天然 TypeScript
SSR 兼容	完全兼容	完全兼容	完全兼容	需额外配置
生态成熟度	非常成熟	非常成熟	成熟	成熟
推荐场景	传统多页应用、需统一主题变量	需要体验未来 CSS 语法、自动兼容	组件库、中大型 React/Vue 项目	高度动态样式、全栈组件化团队

6.1 选型建议

没有银弹，每种方案都有其最适用的场景：

Sass/SCSS：适合需要成熟生态和丰富功能的大型传统项目，或作为基础层与其它方案配合使用。
PostCSS：适合希望使用未来 CSS 语法、需要精细控制构建流程的团队；作为工具链基础设施存在。
CSS Modules：适合注重样式隔离和零运行时开销的组件化项目，与 Sass 搭配效果更佳。
CSS-in-JS：适合样式高度依赖组件状态的全栈应用，或团队偏向 JavaScript 优先的开发方式。

在实际项目中，混合使用这些方案是常见且合理的做法。例如：使用 Sass 编写设计系统的全局变量和 mixin，配合 PostCSS 进行自动前缀和生产环境优化，在组件层面采用 CSS Modules 或 CSS-in-JS 实现隔离，而主题切换等动态需求则通过 CSS 自定义属性来满足。

CSS 进阶 ​

概述 ​

一、Sass/SCSS 预处理器 ​

1.1 变量 ​

1.2 嵌套 ​

1.3 Mixin ​

1.4 @extend（继承） ​

1.5 函数 ​

1.6 @use 和 @forward 模块系统 ​

二、PostCSS ​

2.1 Autoprefixer ​

2.2 postcss-preset-env ​

2.3 插件生态 ​

2.4 在构建工具中使用 ​

三、CSS Modules ​

3.1 原理 ​

3.2 在 React 中使用 ​

3.3 在 Vue 中使用 ​

3.4 CSS Modules 的优势与局限 ​

四、CSS-in-JS ​

4.1 styled-components ​

4.2 Emotion ​

4.3 利弊分析 ​

五、CSS 自定义属性（变量） ​

5.1 基本语法 ​

5.2 与预处理器变量的关键区别 ​

5.3 JavaScript 动态操作 ​

5.4 与预处理器结合使用 ​

六、四种 CSS 方案对比总结 ​

6.1 选型建议 ​

演示：CSS 主题切换器 ​

CSS 进阶

概述

一、Sass/SCSS 预处理器

1.1 变量

1.2 嵌套

1.3 Mixin

1.4 @extend（继承）

1.5 函数

1.6 @use 和 @forward 模块系统

二、PostCSS

2.1 Autoprefixer

2.2 postcss-preset-env

2.3 插件生态

2.4 在构建工具中使用

三、CSS Modules

3.1 原理

3.2 在 React 中使用

3.3 在 Vue 中使用

3.4 CSS Modules 的优势与局限

四、CSS-in-JS

4.1 styled-components

4.2 Emotion

4.3 利弊分析

五、CSS 自定义属性（变量）

5.1 基本语法

5.2 与预处理器变量的关键区别

5.3 JavaScript 动态操作

5.4 与预处理器结合使用

六、四种 CSS 方案对比总结

6.1 选型建议

演示：CSS 主题切换器