预处理器对比

预处理器使用率（2024 State of CSS 调查）

Sass     ████████████████████████  75%
Less     ████████                  15%
PostCSS  ██████                    10%
Stylus   ██                        5%
其他     █                         5%

// Sass（SCSS 语法）
$primary-color: #007bff;
$font-size-base: 16px;
$border-radius: 8px;
$spacing-unit: 8px;

.element {
  color: $primary-color;
  font-size: $font-size-base;
  border-radius: $border-radius;
  padding: $spacing-unit * 2;
}

// Less
@primary-color: #007bff;
@font-size-base: 16px;
@border-radius: 8px;
@spacing-unit: 8px;

.element {
  color: @primary-color;
  font-size: @font-size-base;
  border-radius: @border-radius;
  padding: @spacing-unit * 2;
}

// Stylus
primary-color = #007bff
font-size-base = 16px
border-radius = 8px
spacing-unit = 8px

.element
  color primary-color
  font-size font-size-base
  border-radius border-radius
  padding spacing-unit * 2

// Sass（SCSS）
.nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    color: #333;
    text-decoration: none;
    
    &:hover {
      color: #007bff;
    }
    
    &.active {
      font-weight: bold;
    }
  }
  
  // Sass 支持 @at-root
  @at-root .nav-external {
    color: red;
  }
}

// Less
.nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    color: #333;
    text-decoration: none;
    
    &:hover {
      color: #007bff;
    }
    
    &.active {
      font-weight: bold;
    }
  }
}

// Stylus（可省略括号和分号）
.nav
  ul
    list-style none
    margin 0
    padding 0
  
  li
    display inline-block
  
  a
    color #333
    text-decoration none
    
    &:hover
      color #007bff
    
    &.active
      font-weight bold

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

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 1023px) { @content; }
  } @else {
    @media (min-width: 1024px) { @content; }
  }
}

.container {
  @include flex-center;
  
  @include responsive(mobile) {
    padding: 10px;
  }
  
  @include responsive(desktop) {
    padding: 30px;
  }
}

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

// Less 使用守卫实现条件
.responsive(@breakpoint) when (@breakpoint = mobile) {
  @media (max-width: 767px) {
    .responsive-content();
  }
}

.responsive(@breakpoint) when (@breakpoint = desktop) {
  @media (min-width: 1024px) {
    .responsive-content();
  }
}

.container {
  .flex-center();
  
  // Less 不支持 @content，需要通过 Mixin 模拟
  .responsive-content() {
    padding: 10px;
  }
  .responsive(mobile);
}

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

container()
  flex-center()
  
  +media('max-width: 767px')
    padding 10px
  
  +media('min-width: 1024px')
    padding 30px

.container
  container()

// Sass
@use 'sass:math';

@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

@function color-contrast($bg-color) {
  @if lightness($bg-color) > 50% {
    @return #333;
  } @else {
    @return #fff;
  }
}

.element {
  font-size: rem(24px);
  color: color-contrast(#007bff);
}

// Less（通过 Mixin 模拟函数返回值）
.rem(@px, @base: 16) {
  @rem-value: unit(@px / @base, rem);
}

// Less 没有真正的函数返回值，通常通过 Mixin 设置属性
.font-rem(@px, @base: 16) {
  font-size: unit(@px / @base, rem);
}

.element {
  .font-rem(24px);
  // 或使用内置函数
  color: if(lightness(#007bff) > 50%, #333, #fff);
}

// Stylus
rem(px, base = 16)
  return unit(px / base, 'rem')

color-contrast(bg-color)
  if lightness(bg-color) > 50%
    return #333
  else
    return #fff

.element
  font-size rem(24px)
  color color-contrast(#007bff)

// Sass
@mixin theme($theme) {
  @if $theme == dark {
    background: #1a1a1a;
    color: #ffffff;
  } @else if $theme == light {
    background: #ffffff;
    color: #333333;
  } @else {
    background: #f0f0f0;
    color: #666666;
  }
}

.element {
  @include theme(dark);
}

// Less（使用守卫）
.theme(@theme) when (@theme = dark) {
  background: #1a1a1a;
  color: #ffffff;
}

.theme(@theme) when (@theme = light) {
  background: #ffffff;
  color: #333333;
}

.theme(@theme) when not (@theme = dark) and not (@theme = light) {
  background: #f0f0f0;
  color: #666666;
}

.element {
  .theme(dark);
}

// Stylus
theme(theme)
  if theme == dark
    background #1a1a1a
    color #ffffff
  else if theme == light
    background #ffffff
    color #333333
  else
    background #f0f0f0
    color #666666

.element
  theme(dark)

// Sass
// @for 循环
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage(math.div($i, 12));
  }
}

// @each 循环
$colors: (
  primary: #007bff,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545
);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
  }
}

// @while 循环
$n: 6;
@while $n > 0 {
  .heading-#{$n} {
    font-size: 1rem + $n * 0.2rem;
  }
  $n: $n - 1;
}

// Less（递归 Mixin 实现循环）
// 生成列
.generate-cols(@n, @i: 1) when (@i =< @n) {
  .col-@{i} {
    width: percentage(@i / @n);
  }
  .generate-cols(@n, (@i + 1));
}
.generate-cols(12);

// 遍历颜色（使用 each 函数，Less 3.0+）
@colors: {
  primary: #007bff;
  success: #28a745;
  warning: #ffc107;
  danger: #dc3545;
};

each(@colors, {
  .btn-@{key} {
    background: @value;
  }
});

// Stylus（原生 for/in 循环）
// for 循环
for i in 1..12
  .col-{i}
    width (i / 12) * 100%

// 遍历对象
colors = {
  primary: #007bff,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545
}

for name, color in colors
  .btn-{name}
    background color

编译 1000 行 SCSS/Less/Styl 文件（相对时间，基准 = 1x）

Less      ████                      1x（基准）
Sass      ██████                    1.5x（Dart Sass）
Stylus    ████████                  2x

注：实际性能因文件复杂度和硬件而异

# 压缩输出对比
sass --style=compressed input.scss output.css    # 最小输出
lessc --clean-css input.less output.css          # 相近输出
stylus --compress input.styl -o output.css       # 相近输出

// postcss.config.js
module.exports = {
  plugins: [
    // 嵌套语法支持
    require('postcss-nested')({
      bubble: ['screen'],
      unwrap: ['font-face', 'keyframes']
    }),
    
    // 变量支持
    require('postcss-simple-vars')({
      variables: {
        primaryColor: '#007bff',
        fontSize: '16px'
      }
    }),
    
    // Mixin 支持
    require('postcss-mixins')({
      mixins: {
        'flex-center': {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        }
      }
    }),
    
    // 循环支持
    require('postcss-for'),
    
    // 遍历支持
    require('postcss-each'),
    
    // 自动添加浏览器前缀
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions']
    }),
    
    // CSS 压缩
    require('cssnano')({
      preset: 'default'
    }),
    
    // 像素转 rem
    require('postcss-pxtorem')({
      rootValue: 16,
      propList: ['*']
    })
  ]
};

/* 使用 PostCSS 插件的 CSS 文件 */
$primary-color: #007bff;
$font-size: 16px;

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

.container {
  @mixin flex-center;
  color: $primary-color;
  font-size: $font-size;
  
  & .child {
    color: darken($primary-color, 10%);
  }
  
  @for $i from 1 to 12 {
    .col-$i {
      width: calc(100% / 12 * $i);
    }
  }
}

// 推荐方案：预处理器 + PostCSS 结合
// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables" as *;`
      }
    },
    postcss: {
      plugins: [
        require('autoprefixer'),  // 自动前缀
        require('cssnano')({      // 压缩优化
          preset: 'default'
        })
      ]
    }
  }
};

// 保留 Sass 变量用于编译时计算
$colors: (primary: #007bff, secondary: #6c757d);

// 生成 CSS 变量用于运行时动态
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

// 组件中优先使用 CSS 变量
.button {
  background: var(--color-primary);  // 运行时可切换
  padding: $spacing-md;              // 编译时确定
}

/* 替换前：Sass 变量 + 嵌套 */
/* $primary: #007bff; */
/* .card { .title { color: $primary; } } */

/* 替换后：CSS 原生变量 + 嵌套 */
:root { --primary: #007bff; }
.card {
  & .title { color: var(--primary); }
}

// 保留：Mixin（CSS 无等价物）
@mixin respond-to($bp) {
  @media (min-width: $bp) { @content; }
}

// 保留：循环（CSS 无等价物）
@each $name, $color in $theme-colors {
  .btn-#{$name} { background: $color; }
}

// 替换：变量 → CSS 变量
// 替换：嵌套 → CSS 原生嵌套
// 替换：简单计算 → calc()/clamp()

// vite.config.js — 最小预处理器依赖配置
export default {
  css: {
    preprocessorOptions: {
      scss: {
        // 仅保留 Mixin/函数/循环定义
        additionalData: `@use "@/styles/mixins" as *;`,
      }
    },
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('cssnano')({ preset: 'default' }),
      ]
    }
  }
};

/* 1. CSS 原生变量（已广泛支持） */
:root {
  --primary-color: #007bff;
  --font-size: 16px;
  --spacing-unit: 8px;
}

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
  padding: calc(var(--spacing-unit) * 2);
}

/* JavaScript 动态修改 */
/* document.documentElement.style.setProperty('--primary-color', '#ff0000'); */

/* 2. CSS 原生嵌套（2024年主流浏览器支持） */
.element {
  color: red;
  
  & .child {
    color: blue;
  }
  
  &:hover {
    color: green;
  }
  
  & + & {
    margin-top: 10px;
  }
}

/* 3. CSS @layer（层叠层） */
@layer base, components, utilities;

@layer base {
  .element {
    color: red;
  }
}

@layer components {
  .element {
    color: blue;  /* 优先级高于 base */
  }
}

/* 4. CSS @container（容器查询） */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
  }
}

/* 5. CSS @scope（作用域样式） */
@scope (.card) to (.card__content) {
  :scope {
    padding: 20px;
  }
  
  .title {
    font-size: 1.5rem;
  }
}

/* 6. CSS :has() 选择器 */
.card:has(.featured) {
  border: 2px solid gold;
}

/* 7. CSS 原生 calc() */
.element {
  width: calc(100% - 2rem);
  height: calc(100vh - 64px);
  font-size: calc(1rem + 0.5vw);
}

// 推荐方案：预处理器变量用于编译时计算，CSS 变量用于运行时动态

// 1. 预处理器定义设计令牌
$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545
);

// 2. 生成 CSS 变量
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
  
  // 间距系统
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

// 3. 组件中使用 CSS 变量实现动态主题
.button {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  
  &:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, black);
  }
  
  &--success {
    background: var(--color-success);
  }
  
  &--danger {
    background: var(--color-danger);
  }
}

// 4. 暗色主题
[data-theme="dark"] {
  --color-primary: #4da3ff;
  --color-secondary: #adb5bd;
  --color-success: #5cb85c;
  --color-warning: #f0ad4e;
  --color-danger: #d9534f;
}

// Less
@primary-color: #007bff;
@font-size: 16px;
@border-radius: 8px;

// Sass
$primary-color: #007bff;
$font-size: 16px;
$border-radius: 8px;

// Less
.button(@color; @size: 14px) {
  background: @color;
  font-size: @size;
  padding: @size / 2 @size;
  border: none;
}

.btn {
  .button(#007bff);
}

.btn-lg {
  .button(#007bff; 18px);
}

// Sass
@mixin button($color, $size: 14px) {
  background: $color;
  font-size: $size;
  padding: math.div($size, 2) $size;
  border: none;
}

.btn {
  @include button(#007bff);
}

.btn-lg {
  @include button(#007bff, 18px);
}

// Less（守卫）
.button(@type) when (@type = primary) {
  background: #007bff;
  color: white;
}

.button(@type) when (@type = secondary) {
  background: #6c757d;
  color: white;
}

.button(@type) when (@type = danger) {
  background: #dc3545;
  color: white;
}

// Sass
@mixin button($type) {
  @if $type == primary {
    background: #007bff;
    color: white;
  } @else if $type == secondary {
    background: #6c757d;
    color: white;
  } @else if $type == danger {
    background: #dc3545;
    color: white;
  }
}

// Less（递归）
.generate-cols(@n, @i: 1) when (@i =< @n) {
  .col-@{i} { width: percentage(@i / @n); }
  .generate-cols(@n, (@i + 1));
}
.generate-cols(12);

// Sass
@use 'sass:math';

@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage(math.div($i, 12));
  }
}

// Less
@import 'variables';
@import (reference) 'mixins';
@import (once) 'base';

// Sass
@use 'variables' as *;
@use 'mixins';  // 自动命名空间
@use 'base';    // 默认只导入一次

// Sass
$primary-color: #007bff;
$font-size: 16px;

// Less
@primary-color: #007bff;
@font-size: 16px;

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

.container {
  @include flex-center;
}

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

.container {
  .flex-center();
}

// Sass
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16px) * 1rem;
}

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

// Less（通过 Mixin 模拟）
.rem(@px) {
  font-size: unit(@px / 16, rem);
}

.element {
  .rem(24px);
}

#!/bin/bash
# Less → Sass 批量迁移脚本

# 1. 备份原文件
mkdir -p backup
find . -name "*.less" -exec cp {} backup/ \;

# 2. 重命名文件
find . -name "*.less" -exec rename 's/\.less$/.scss/' {} \;

# 3. 替换变量符号 @ → $
find . -name "*.scss" -exec sed -i '' 's/@\([a-zA-Z][a-zA-Z0-9-]*\):/$\1:/g' {} \;
find . -name "*.scss" -exec sed -i '' 's/@\([a-zA-Z][a-zA-Z0-9-]*\)/$\1/g' {} \;

# 4. 替换 Mixin 调用（需要手动检查）
# .mixin() → @include mixin
# .mixin(@arg) → @include mixin($arg)

# 5. 替换 @import → @use
find . -name "*.scss" -exec sed -i '' "s/@import '\(.*\)';/@use '\1' as *;/g" {} \;

echo "迁移完成，请手动检查以下项目："
echo "1. Mixin 定义和调用"
echo "2. 守卫条件语句"
echo "3. 循环语法"
echo "4. 函数定义"

{
  "compatibility": {
    "webpack5": {
      "sass-loader": ">=12.0.0",
      "less-loader": ">=10.0.0",
      "stylus-loader": ">=6.0.0",
      "postcss-loader": ">=6.0.0"
    },
    "vite4": {
      "sass": "内置支持",
      "less": "内置支持",
      "stylus": "内置支持",
      "postcss": "内置支持"
    },
    "rollup3": {
      "rollup-plugin-sass": ">=2.0.0",
      "rollup-plugin-less": ">=1.2.0",
      "rollup-plugin-postcss": ">=4.0.0"
    }
  }
}

团队配置建议

├── 技术选型
│   ├── 统一使用一种预处理器（推荐 Sass）
│   ├── 统一命名规范（BEM 推荐）
│   └── 统一文件结构
│
├── 开发规范
│   ├── 变量命名：语义化（$color-primary 而非 $c1）
│   ├── Mixin 命名：动词/形容词（flex-center 而非 mc）
│   └── 嵌套深度：≤3 层
│
└── 工具配置
    ├── 编辑器插件统一
    ├── 编译配置统一
    └── 代码格式化统一

// Vite 配置
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 全局注入变量和 Mixin
        additionalData: `
          @use "@/styles/variables" as *;
          @use "@/styles/mixins" as *;
        `,
        // 使用现代 Sass API
        api: 'modern-compiler',
        // Source Map
        sourceMap: true
      },
      less: {
        additionalData: `
          @import "@/styles/variables.less";
          @import "@/styles/mixins.less";
        `,
        javascriptEnabled: true
      }
    },
    postcss: {
      plugins: [
        require('autoprefixer')(),
        require('cssnano')({ preset: 'default' })
      ]
    }
  }
});

// Webpack 配置
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer', 'cssnano']
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              additionalData: `
                @use "@/styles/variables" as *;
                @use "@/styles/mixins" as *;
              `,
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

// 预处理器变量用于编译时计算
$sizes: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
  xl: 32px
);

// CSS 变量用于运行时动态
:root {
  @each $name, $size in $sizes {
    --spacing-#{$name}: #{$size};
  }
}

// 组件中使用 CSS 变量实现响应式设计
.card {
  padding: var(--spacing-md);
  
  @container (min-width: 768px) {
    padding: var(--spacing-xl);
  }
}

// 使用 CSS :has() 选择器
.card:has(.card__image) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

// ✅ 推荐：使用 @use 避免重复导入
@use 'variables' as *;
@use 'mixins' as *;

// ❌ 避免：使用 @import 导致重复编译
@import 'variables';
@import 'mixins';

// ✅ 推荐：使用 @for 代替嵌套 Mixin 递归
@for $i from 1 through 12 {
  .col-#{$i} { width: percentage(math.div($i, 12)); }
}

// ❌ 避免：深层嵌套增加选择器复杂度
.page .container .row .col .element { }

// ✅ 推荐：使用 @extend 减少重复代码
%button-base {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;
  background: #007bff;
}

.btn-secondary {
  @extend %button-base;
  background: #6c757d;
}

推荐迁移到 PostCSS 的场景：
├── 希望更灵活的插件组合
├── 只需要部分预处理器功能
├── 想要更接近 CSS 原生语法
├── 项目使用现代构建工具
└── 新项目从零开始

继续使用预处理的场景：
├── 团队已熟悉预处理器
├── 需要完整的功能支持
├── 项目依赖大量 Mixin/函数
├── 迁移成本过高
└── 使用 Bootstrap 等依赖预处理器的框架

# 1. 锁定版本
{
  "devDependencies": {
    "sass": "1.69.5",
    "less": "4.2.0"
  }
}

# 2. 使用 .nvmrc 统一 Node.js 版本
echo "18.17.0" > .nvmrc

# 3. 使用 Docker 统一环境
# Dockerfile
FROM node:18
RUN npm install -g sass@1.69.5

# 4. CI/CD 中固定版本
# .github/workflows/build.yml
- uses: actions/setup-node@v3
  with:
    node-version: '18'
- run: npm ci  # 使用 lock 文件

// webpack.config.js（不推荐）
module.exports = {
  module: {
    rules: [
      { test: /\.scss$/, use: ['sass-loader'] },
      { test: /\.less$/, use: ['less-loader'] }
    ]
  }
};

// 问题：
// 1. 增加构建复杂度
// 2. 无法共享变量和 Mixin
// 3. 团队协作混乱
// 建议：统一使用一种预处理器

阶段 1（立即可做）：
├── 使用 CSS 原生变量替代 Sass 变量（用于主题色等动态值）
├── 使用 CSS calc() 替代 Sass 数学运算
└── 使用 CSS 原生嵌套（浏览器支持后）

阶段 2（浏览器广泛支持后）：
├── 使用 CSS @layer 替代 BEM 命名
├── 使用 CSS @container 替代部分响应式 Mixin
└── 使用 CSS :has() 替代部分 JavaScript 逻辑

阶段 3（长期规划）：
├── 评估是否可以完全移除预处理器
├── 保留 PostCSS 用于自动前缀和压缩
└── 使用 CSS 原生模块系统（如未来支持）