说说对 CSS 预编语言的理解？有哪些区别？

问题解析

CSS 预处理器扩展了 CSS 的功能，让样式代码更具可维护性。面试考察这个问题，是想要了解候选人是否掌握现代 CSS 开发工具，以及能否根据项目需求选择合适的预处理器。

什么是 CSS 预处理器

CSS 预处理器 是一种脚本语言，扩展了 CSS 的功能，增加了变量、嵌套、混合、函数等特性，让 CSS 更易维护、方便复用。

工作流程：

预处理代码（.scss/.less/.styl）
    ↓
编译器编译
    ↓
标准 CSS（.css）
    ↓
浏览器解析

主流预处理器对比

特性	Sass/SCSS	Less	Stylus
发布时间	2007	2009	2010
语法风格	两种（Sass/SCSS）	类似 CSS	极简（无括号分号）
语言	Ruby（原）/ Dart	JavaScript	JavaScript
变量	`$var`	`@var`	`var`
混入	`@mixin` / `@include`	`.mixin()`	`mixin()`
继承	`@extend`	`:extend()`	`@extend`
条件语句	✅	✅	✅
循环	✅	✅	✅
社区生态	最丰富	较丰富	较小

核心特性详解

1. 变量

// SCSS
$primary-color: #1890ff;
$font-size-base: 14px;

.button {
  background: $primary-color;
  font-size: $font-size-base;
}

// Less
@primary-color: #1890ff;
@font-size-base: 14px;

.button {
  background: @primary-color;
  font-size: @font-size-base;
}

// Stylus
primary-color = #1890ff
font-size-base = 14px

.button
  background primary-color
  font-size font-size-base

2. 嵌套

// SCSS
.nav {
  background: #333;

  .nav-item {
    color: white;

    &:hover {
      color: #1890ff;
    }

    &.active {
      font-weight: bold;
    }
  }
}

// Stylus（更简洁）
.nav
  background #333

  .nav-item
    color white

    &:hover
      color #1890ff

    &.active
      font-weight bold

3. 混入（Mixins）

// SCSS
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button($bg, $color) {
  background: $bg;
  color: $color;
  padding: 8px 16px;
}

.card {
  @include flex-center;
}

.btn-primary {
  @include button(#1890ff, white);
}

// Less
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button(@bg, @color) {
  background: @bg;
  color: @color;
  padding: 8px 16px;
}

.card {
  .flex-center();
}

.btn-primary {
  .button(#1890ff, white);
}

// Stylus
flex-center()
  display flex
  justify-content center
  align-items center

button(bg, color)
  background bg
  color color
  padding 8px 16px

.card
  flex-center()

.btn-primary
  button(#1890ff, white)

4. 继承

// SCSS
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

5. 运算

// SCSS
.container {
  width: 100% - 20px;
  font-size: 14px * 1.5;
  margin: 10px + 5px;
}

6. 函数

// SCSS
@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}

.title {
  font-size: calculate-rem(24px);
}

7. 条件与循环

// SCSS
$theme: 'dark';

.button {
  @if $theme == 'dark' {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

// 循环
@for $i from 1 through 4 {
  .col-#{$i} {
    width: 25% * $i;
  }
}

// 结果：.col-1 { width: 25%; } ...

预处理器 vs CSS 原生

CSS 变量（原生）

:root {
  --primary-color: #1890ff;
}

.button {
  background: var(--primary-color);
}

预处理器变量 vs CSS 变量：

特性	预处理器变量	CSS 变量
编译时机	编译时	运行时
作用域	块级/全局	DOM 级
可修改	❌	✅（JS/媒体查询）
性能	好	稍差（运行时计算）
兼容性	编译后兼容	IE 不支持

CSS 嵌套（原生，正在普及）

/* CSS Nesting（现代浏览器支持） */
.nav {
  background: #333;

  & .nav-item {
    color: white;
  }
}

CSS @import vs 预处理器 @import

// 预处理器：编译时合并，只产生一个 HTTP 请求
@import 'variables';
@import 'mixins';
@import 'components';

/* CSS：每个 @import 产生一个 HTTP 请求 */
@import url('variables.css');
@import url('mixins.css');

现代趋势：PostCSS

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 的工具。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),      // @import
    require('postcss-preset-env'),  // 未来 CSS 语法
    require('autoprefixer'),        // 自动加前缀
    require('cssnano'),             // 压缩
  ],
};

PostCSS 与预处理器的关系：

预处理器：扩展 CSS 语法
PostCSS：转换和优化 CSS

如何选择

场景	推荐
大型项目、组件库	Sass/SCSS
中小型项目、快速开发	Less
追求极简语法	Stylus
未来标准兼容	PostCSS + CSS 变量
新项目	原生 CSS + PostCSS

最佳实践

1. 项目结构

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   └── _modal.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   └── _about.scss
└── main.scss

2. 变量命名规范

// 颜色
$color-primary: #1890ff;
$color-success: #52c41a;
$color-warning: #faad14;
$color-error: #f5222d;

// 字体
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

面试要点

能够说出 Sass、Less、Stylus 的主要区别
理解预处理器变量和 CSS 变量的区别
能够写出嵌套、混入、继承的示例代码
了解 PostCSS 的作用和优势
能够根据项目需求推荐合适的方案
了解现代 CSS 正在取代预处理器的哪些功能

现代趋势：

CSS 变量、嵌套、@layer 正在普及
原生 CSS 功能越来越强大
PostCSS 成为标准工具链
预处理器的重要性在下降，但仍有用武之地