CSS 预处理器与样式管理系统设计

CSS 是前端的基础，但原生 CSS 的局限性（无变量、无混入、无嵌套）导致样式代码难以维护。Sass、SCSS 和 CSS-in-JS 等工具应运而生，让我们能够以工程化的方式管理样式。

1. Sass/SCSS 基础

为什么选择 Sass？

// 原生 CSS 的问题：代码重复
.button {
  background-color: #007bff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

.button-primary {
  background-color: #007bff;  // 重复
  padding: 10px 20px;         // 重复
  border: none;               // 重复
  border-radius: 4px;         // 重复
  color: white;
}

// Sass 解决方案
$primary-color: #007bff;
$spacing: 10px 20px;

.button {
  background-color: $primary-color;
  padding: $spacing;
  border: none;
  border-radius: 4px;
}

.button-primary {
  @extend .button;  // 继承
  color: white;
}

2. Sass 核心特性

变量

// 全局变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$spacing-unit: 8px;
$border-radius: 4px;

// 计算
$button-padding: $spacing-unit * 2;
$button-font-size: 16px;

.button {
  color: white;
  background-color: $primary-color;
  padding: $button-padding;
  font-size: $button-font-size;
  border-radius: $border-radius;
}

嵌套

.card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  
  // 嵌套选择器
  .card-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }
  
  .card-body {
    font-size: 14px;
  }
  
  .card-footer {
    margin-top: 20px;
    text-align: right;
  }
  
  // 嵌套伪类
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  // BEM 风格嵌套
  &__title {
    font-size: 18px;
    font-weight: bold;
  }
}

混入（Mixin）

// 定义混入
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
}

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

// 使用混入
.button-primary {
  @include button-style(#007bff);
}

.button-secondary {
  @include button-style(#6c757d, #000);
}

.container {
  @include flex-center;
}

.responsive-text {
  font-size: 16px;
  
  @include responsive('mobile') {
    font-size: 14px;
  }
  
  @include responsive('desktop') {
    font-size: 18px;
  }
}

继承（@extend）

// 定义基础样式
%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

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

// 编译结果
// .btn-primary, .btn-danger {
//   padding: 10px 20px;
//   ...
// }
// .btn-primary { background-color: #007bff; }
// .btn-danger { background-color: #dc3545; }

函数与逻辑

// 颜色变换
$primary: #007bff;

.button {
  background-color: $primary;
  
  &:hover {
    background-color: darken($primary, 10%);
  }
  
  &:disabled {
    background-color: lighten($primary, 20%);
  }
}

// 条件语句
@mixin box-shadow($size) {
  @if $size == 'small' {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  } @else if $size == 'medium' {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  } @else {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
}

.card {
  @include box-shadow('medium');
}

// 循环
@for $i from 1 through 5 {
  .grid-col-#{$i} {
    width: percentage($i / 5);
  }
}

// 输出
// .grid-col-1 { width: 20%; }
// .grid-col-2 { width: 40%; }
// ...

3. 项目结构最佳实践

文件组织

styles/
├── abstracts/
│   ├── _variables.scss      # 变量定义
│   ├── _mixins.scss         # 混入定义
│   └── _functions.scss      # 函数定义
├── base/
│   ├── _reset.scss          # CSS 重置
│   ├── _typography.scss     # 字体样式
│   └── _animations.scss     # 动画定义
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _sidebar.scss
│   └── _grid.scss
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   ├── _modal.scss
│   └── _form.scss
├── pages/
│   ├── _home.scss
│   ├── _dashboard.scss
│   └── _profile.scss
└── main.scss                # 主入口文件

main.scss 入口

// main.scss

// 1. 抽象层（变量、混入、函数）
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/functions';

// 2. 基础样式
@import 'base/reset';
@import 'base/typography';
@import 'base/animations';

// 3. 布局
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/grid';

// 4. 组件
@import 'components/button';
@import 'components/card';
@import 'components/modal';
@import 'components/form';

// 5. 页面特定样式
@import 'pages/home';
@import 'pages/dashboard';
@import 'pages/profile';

4. CSS-in-JS（Styled Components）

现代 React 应用常用 CSS-in-JS 解决方案：

// 使用 styled-components
import styled from 'styled-components';

// 定义样式化组件
const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  ${props => props.large && css`
    padding: 15px 30px;
    font-size: 18px;
  `}
`;

// 使用
export function Button({ primary, large, children, ...props }) {
  return (
    <StyledButton primary={primary} large={large} {...props}>
      {children}
    </StyledButton>
  );
}

// 组件使用
<Button primary>主要按钮</Button>
<Button large>大按钮</Button>

5. 响应式设计的最佳实践

移动优先方法

// 定义断点
$breakpoints: (
  'mobile': 320px,
  'tablet': 768px,
  'desktop': 1024px,
  'wide': 1440px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// 使用：从小到大逐步增强
.container {
  width: 90%;  // 移动设备
  padding: 10px;
  
  @include respond-to('tablet') {
    width: 85%;
    padding: 20px;
  }
  
  @include respond-to('desktop') {
    width: 80%;
    max-width: 1200px;
    padding: 30px;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;  // 1 列
  gap: 10px;
  
  @include respond-to('tablet') {
    grid-template-columns: repeat(2, 1fr);  // 2 列
  }
  
  @include respond-to('desktop') {
    grid-template-columns: repeat(3, 1fr);  // 3 列
  }
}

6. 性能优化

使用 CSS 分离与代码分割

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

7. BEM 命名规范

// Block Element Modifier
// .block__element--modifier

.card {                      // Block
  padding: 20px;
  
  &__header {                // Element
    border-bottom: 1px solid #eee;
  }
  
  &__title {                 // Element
    font-size: 18px;
    font-weight: bold;
  }
  
  &__body {                  // Element
    padding: 10px 0;
  }
  
  &--featured {              // Modifier
    border: 2px solid #007bff;
    background-color: #f0f8ff;
  }
  
  &__title--large {          // Element Modifier
    font-size: 24px;
  }
}

// HTML 使用
// <div class="card card--featured">
//   <div class="card__header">
//     <h2 class="card__title card__title--large">标题</h2>
//   </div>
//   <div class="card__body">内容</div>
// </div>

样式系统清单

在构建前端项目时检查：

• 定义全局变量（颜色、间距、字体）
• 使用 SCSS 嵌套和混入减少重复
• 采用 BEM 命名规范
• 实现移动优先的响应式设计
• 按类别组织样式文件
• 确保颜色对比度符合无障碍标准
• 使用工具自动化样式检查（stylelint）

---

相关工具推荐：

• 色彩转换工具 - RGB/HEX/HSL 转换
• 调色板生成器 - 创建配色方案
• 对比度检查工具 - 验证文字可读性