预处理器概述

/* 原生 CSS：硬编码，修改困难 */
.header { background: #007bff; }
.button { background: #007bff; }
.link { color: #007bff; }
.badge { border-color: #007bff; }
/* 修改主色调需要逐个替换，且无法保证一致性 */

// 预处理器：变量统一管理
$primary-color: #007bff;
 
.header { background: $primary-color; }
.button { background: $primary-color; }
.link { color: $primary-color; }
.badge { border-color: $primary-color; }
// 修改变量值即可全局生效

/* 原生 CSS：选择器冗余 */
.nav { }
.nav__item { }
.nav__item--active { }
.nav__link { }
.nav__link:hover { }

// 预处理器：嵌套表达层级关系
.nav {
  &__item {
    &--active { }
  }
  &__link {
    &:hover { }
  }
}

/* 原生 CSS：重复代码 */
.card { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 修改截断逻辑需要逐个更新 */

// 预处理器：Mixin 封装复用
@mixin truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card { @include truncate; }
.title { @include truncate; }
// 修改只需改 Mixin 定义

/* 原生 CSS：只能做简单计算 */
.element {
  width: calc(100% - 20px);
  /* 无法实现：颜色变暗、px 转 rem、条件返回值 */
}

// 预处理器：函数动态计算
.element {
  background: darken($primary-color, 10%);  // 颜色变暗
  font-size: rem(24px);                      // 单位转换
  color: if(lightness($bg) > 50%, #333, #fff); // 条件判断
}

/* 原生 CSS @import 的问题 */
@import 'variables.css';  /* 额外 HTTP 请求 */
@import 'reset.css';      /* 渲染阻塞 */
/* 所有选择器共享全局命名空间，容易冲突 */

// 预处理器：模块化隔离
@use 'variables' as vars;    // 命名空间隔离
@use 'mixins' as *;          // 按需导入
.element { color: vars.$primary; }

/* 原生 CSS：手动编写每个类 */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
/* ... 重复 12 次 */

// 预处理器：循环批量生成
@for $i from 1 through 12 {
  .mt-#{$i} { margin-top: $i * 4px; }
}

// Sass 变量：编译时静态替换
$primary: #007bff;
.button { background: $primary; }
// 编译后 → .button { background: #007bff; }
// 变量在编译后完全消失，无法在运行时修改

/* CSS 变量：运行时动态计算 */
:root { --primary: #007bff; }
.button { background: var(--primary); }
/* 变量在运行时保留，可通过 JS 或媒体查询动态修改 */

// Sass 变量定义设计令牌（编译时确定的基础值）
$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);
 
// 通过 Sass 循环生成 CSS 变量（运行时可动态修改）
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}
 
// 组件中使用 CSS 变量实现运行时主题切换
.button {
  background: var(--color-primary);
}
[data-theme="dark"] {
  --color-primary: #4da3ff;
}

/* CSS 原生嵌套（2024 浏览器支持） */
.card {
  padding: 16px;
 
  & .title {           /* 子选择器 */
    font-size: 1.5rem;
  }
 
  &:hover {            /* 伪类 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
 
  @media (width >= 768px) {  /* 媒体查询嵌套 */
    padding: 24px;
  }
}

// Sass 嵌套（编译时展开，兼容所有浏览器）
.card {
  padding: 16px;
 
  .title {             // 子选择器（无需 & 前缀）
    font-size: 1.5rem;
  }
 
  &:hover {            // 伪类
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
 
  &-header {           // 后缀拼接（CSS 原生不支持）
    border-bottom: 1px solid #eee;
  }
 
  @media (min-width: 768px) {
    padding: 24px;
  }
}

// 预处理器变量：编译时替换
$primary-color: #007bff;
.button { background: $primary-color; }
 
// 编译后
.button { background: #007bff; }

/* CSS 变量：运行时计算 */
:root { --primary-color: #007bff; }
.button { background: var(--primary-color); }

// 源代码
.nav {
  ul { list-style: none; }
  a { color: red; }
}
 
// 展开过程
.nav { }
  .nav ul { list-style: none; }
  .nav a { color: red; }

// SCSS 语法（推荐）
$primary-color: #007bff;
 
.button {
  background: $primary-color;
  
  &:hover {
    background: darken($primary-color, 10%);
  }
}
 
// 编译后
.button {
  background: #007bff;
}
.button:hover {
  background: #0056b3;
}

// Less 语法
@primary-color: #007bff;
 
.button {
  background: @primary-color;
  
  &:hover {
    background: darken(@primary-color, 10%);
  }
}

// Stylus 语法（最简洁）
primary-color = #007bff
 
.button
  background primary-color
  
  &:hover
    background darken(primary-color, 10%)

// Sass 变量
$color: #007bff;
$font-size: 16px;
$spacing: 20px;
 
.element {
  color: $color;
  font-size: $font-size;
  margin: $spacing;
}

// 推荐的变量命名方式
// 语义化命名
$color-primary: #007bff;
$color-secondary: #6c757d;
$color-success: #28a745;
 
// 功能性命名
$font-size-base: 16px;
$font-size-sm: 14px;
$font-size-lg: 18px;
 
// 间距系统
$spacing-unit: 8px;
$spacing-sm: $spacing-unit;      // 8px
$spacing-md: $spacing-unit * 2;  // 16px
$spacing-lg: $spacing-unit * 3;  // 24px

// 嵌套语法
.nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    text-decoration: none;
    color: #333;
    
    &:hover {
      color: #007bff;
    }
  }
}
 
// 编译后
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
  color: #333;
}
.nav a:hover {
  color: #007bff;
}

// ✅ 推荐：控制在3层以内
.card {
  &-header { }
  &-body { }
  &-footer { }
}
 
// ❌ 不推荐：嵌套过深
.page {
  .container {
    .row {
      .col {
        .card {
          .header {
            // 选择器过于具体，性能下降
          }
        }
      }
    }
  }
}

// 基础 Mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
// 带参数的 Mixin
@mixin button($color, $size: 14px) {
  background: $color;
  font-size: $size;
  padding: $size / 2 $size;
  border: none;
  cursor: pointer;
  
  &:hover {
    background: darken($color, 10%);
  }
}
 
// 使用
.container {
  @include flex-center;
}
 
.btn-primary {
  @include button(#007bff, 16px);
}

// 内置函数
$color: #007bff;
 
.element {
  color: lighten($color, 10%);   // 变亮
  background: darken($color, 10%); // 变暗
}
 
// 自定义函数
$base-font-size: 16px;
 
@function rem($px) {
  @return calc($px / $base-font-size) * 1rem;
}
 
.text {
  font-size: rem(24px); // 1.5rem
}
 
// 颜色变体函数
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}
 
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// 文件结构
styles/
├── abstracts/           # 抽象层（不直接生成CSS）
│   ├── _variables.scss  # 变量定义
│   ├── _mixins.scss     # Mixin 定义
│   └── _functions.scss  # 函数定义
├── base/                # 基础样式
│   ├── _reset.scss      # 重置样式
│   └── _typography.scss # 排版样式
├── components/          # 组件样式
│   ├── _button.scss
│   └── _card.scss
├── layout/              # 布局样式
│   ├── _header.scss
│   └── _footer.scss
└── main.scss            # 主入口文件
 
// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';
@use 'layout/footer';

// 使用 mixin 复用样式
@mixin card($radius: 8px, $shadow: true) {
  border: 1px solid #ddd;
  border-radius: $radius;
  padding: 20px;
  background: white;
  
  @if $shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}
 
.card {
  @include card();
}
 
.sidebar-card {
  @include card(4px, false);
  background: #f8f9fa;
}

// 7-1 架构模式（推荐）
styles/
├── abstracts/        # 变量、Mixin、函数
├── base/             # 重置、排版等基础
├── components/       # 组件（按钮、卡片等）
├── layout/           # 布局（头部、侧边栏等）
├── pages/            # 页面特定样式
├── themes/           # 主题样式
├── vendors/          # 第三方库
└── main.scss         # 主入口

// 修改变量即可全局更新
$primary-color: #28a745;
 
.button {
  background: $primary-color;
}
 
.link {
  color: $primary-color;
}
 
.border {
  border-color: $primary-color;
}

// 响应式计算
$columns: 12;
$gutter: 20px;
 
@for $i from 1 through $columns {
  .col-#{$i} {
    width: calc((100% - #{$gutter * ($columns - 1)}) / #{$columns} * #{$i} + #{$gutter * ($i - 1)});
  }
}

# Sass 编译
sass input.scss output.css                    # 单次编译
sass --watch input.scss:output.css            # 监听文件变化
sass --watch src/:dist/                       # 监听目录
sass --style=compressed input.scss output.css # 压缩输出
sass --style=expanded input.scss output.css   # 展开输出
 
# Less 编译
lessc input.less output.css                   # 单次编译
lessc --compress input.less output.css        # 压缩输出

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',   // 将 CSS 注入 DOM
          'css-loader',     // 解析 CSS 中的 @import 和 url()
          'sass-loader'     // 编译 Sass
        ]
      }
    ]
  }
};

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-nested'),      // 嵌套支持
    require('postcss-simple-vars'), // 变量支持
    require('autoprefixer'),        // 自动添加前缀
    require('cssnano')              // 压缩
  ]
};

{
  "scripts": {
    "sass": "sass src/scss:dist/css",
    "sass:watch": "sass --watch src/scss:dist/css",
    "sass:prod": "sass --style=compressed src/scss:dist/css",
    "less": "lessc src/less/main.less dist/css/main.css",
    "less:prod": "lessc --clean-css src/less/main.less dist/css/main.css"
  },
  "devDependencies": {
    "sass": "^1.69.0",
    "less": "^4.2.0"
  }
}

// .vscode/settings.json
{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ]
}

✅ 推荐：按功能拆分文件
styles/
├── abstracts/    # 不直接输出CSS
├── base/         # 基础样式
├── components/   # 组件
└── main.scss
 
❌ 不推荐：单文件包含所有样式
styles/
└── all.scss      # 难以维护

// 变量命名：语义化 + 层级
$color-primary: #007bff;
$color-primary-light: lighten($color-primary, 10%);
$color-primary-dark: darken($color-primary, 10%);
 
// Mixin 命名：动词或形容词
@mixin flex-center { }
@mixin truncate-text { }
 
// 文件命名：下划线前缀表示部分文件
// _variables.scss（不会被单独编译）

// ✅ 推荐：简洁明了
.card {
  &-header { }
  &-body { }
  &-footer { }
}
 
// ❌ 不推荐：嵌套过深
.a {
  .b {
    .c {
      .d {
        .e {
          // 选择器过于具体
        }
      }
    }
  }
}

// ✅ 推荐：集中管理，层级清晰
// _variables.scss
$color-primary: #007bff;
$color-secondary: #6c757d;
$font-size-base: 16px;
$spacing-unit: 8px;
 
// ❌ 不推荐：分散定义，难以维护
// component-a.scss
$color: #007bff;
 
// component-b.scss
$color: #0056b3; // 重复定义，容易混淆

// ✅ 推荐：提取公共样式为 Mixin
@mixin truncate($width: 100%) {
  width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
// ❌ 不推荐：重复编写相同样式
.text-1 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// @import（旧语法，已弃用）
@import 'variables';  // 所有变量变为全局，可能冲突
 
// @use（新语法，推荐）
@use 'variables' as vars;  // 命名空间隔离，避免冲突
.element {
  color: vars.$primary-color;
}

// Mixin：带参数的样式复用，CSS 原生无等价物
@mixin respond-to($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: 576px) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: 768px) { @content; }
  }
}
 
.container {
  @include respond-to(md) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

// 批量生成间距工具类
$spacing-values: (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24);
@each $value in $spacing-values {
  .p-#{$value} { padding: $value * 4px; }
  .m-#{$value} { margin: $value * 4px; }
}