CSS 预处理器

预处理器简介

CSS预处理器是一种专门的编程语言，编译成CSS，提供变量、嵌套、混合、函数等功能。

常用预处理器

1. Sass/SCSS

变量

// 变量定义
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size-base: 16px;

// 使用变量
.button {
  background-color: $primary-color;
  font-size: $font-size-base;
}

嵌套

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  
  .header {
    background-color: $primary-color;
    
    .logo {
      font-size: 24px;
    }
  }
  
  .main {
    padding: 20px;
  }
}

混合（Mixin）

// 定义混合
@mixin button($bg-color, $text-color) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 0.8;
  }
}

// 使用混合
.button-primary {
  @include button($primary-color, white);
}

.button-secondary {
  @include button($secondary-color, white);
}

函数

// 定义函数
@function calculate-width($columns, $gap) {
  @return calc(100% / $columns - $gap);
}

// 使用函数
.column {
  width: calculate-width(3, 20px);
}

继承

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-primary {
  @extend .button;
  background-color: $primary-color;
  color: white;
}

.button-secondary {
  @extend .button;
  background-color: $secondary-color;
  color: white;
}

条件和循环

// 条件
@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 576px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (min-width: 577px) and (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 769px) {
      @content;
    }
  }
}

.container {
  @include responsive(mobile) {
    width: 100%;
  }
}

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

// each循环
$colors: (red: #ff0000, green: #00ff00, blue: #0000ff);

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

导入

// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

// _mixins.scss
@mixin button($bg-color, $text-color) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
}

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

.button {
  @include button($primary-color, white);
}

2. Less

变量

// 变量定义
@primary-color: #007bff;
@secondary-color: #6c757d;

// 使用变量
.button {
  background-color: @primary-color;
}

嵌套

.container {
  width: 100%;
  
  .header {
    background-color: @primary-color;
    
    .logo {
      font-size: 24px;
    }
  }
}

混合

// 定义混合
.button(@bg-color, @text-color) {
  padding: 10px 20px;
  background-color: @bg-color;
  color: @text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 使用混合
.button-primary {
  .button(@primary-color, white);
}

函数

// 定义函数
.calculate-width(@columns, @gap) {
  return: calc(100% / @columns - @gap);
}

// 使用函数
.column {
  width: .calculate-width(3, 20px)[return];
}

运算

@width: 100px;
@padding: 10px;

.container {
  width: @width + @padding * 2;
}

导入

// _variables.less
@primary-color: #007bff;

// main.less
@import 'variables';

.button {
  background-color: @primary-color;
}

3. Stylus

变量

// 变量定义
primary-color = #007bff
secondary-color = #6c757d

// 使用变量
.button
  background-color primary-color

嵌套

.container
  width 100%
  
  .header
    background-color primary-color
    
    .logo
      font-size 24px

混合

// 定义混合
button(bg-color, text-color)
  padding 10px 20px
  background-color bg-color
  color text-color
  border none
  border-radius 4px
  cursor pointer

// 使用混合
.button-primary
  button(primary-color, white)

函数

// 定义函数
calculate-width(columns, gap)
  return calc(100% / columns - gap)

// 使用函数
.column
  width calculate-width(3, 20px)

预处理器优势

1. 变量

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

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

2. 嵌套

.container {
  .header {
    .logo {
      font-size: 24px;
    }
  }
}

3. 混合

@mixin button($bg-color) {
  padding: 10px 20px;
  background-color: $bg-color;
}

.button-primary {
  @include button($primary-color);
}

4. 函数

@function calculate-width($columns) {
  @return 100% / $columns;
}

.column {
  width: calculate-width(3);
}

5. 模块化

@import 'variables';
@import 'mixins';
@import 'buttons';

实际应用

1. 主题系统

// _variables.scss
$themes: (
  light: (
    primary-color: #007bff,
    background-color: #ffffff,
    text-color: #333333
  ),
  dark: (
    primary-color: #007bff,
    background-color: #333333,
    text-color: #ffffff
  )
);

@mixin theme($theme-name) {
  $theme: map-get($themes, $theme-name);
  
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
}

.button {
  @include theme(light);
}

2. 响应式系统

// _mixins.scss
$breakpoints: (
  mobile: 576px,
  tablet: 768px,
  desktop: 992px,
  large: 1200px
);

@mixin responsive($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

.container {
  width: 100%;
  
  @include responsive(tablet) {
    max-width: 750px;
  }
  
  @include responsive(desktop) {
    max-width: 970px;
  }
}

3. 按钮系统

// _buttons.scss
@mixin button($bg-color, $text-color: white) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 0.8;
  }
  
  &:active {
    transform: translateY(1px);
  }
}

.button-primary {
  @include button($primary-color);
}

.button-secondary {
  @include button($secondary-color);
}

.button-success {
  @include button($success-color);
}

.button-danger {
  @include button($danger-color);
}

面试常见问题

1. CSS 预处理器有哪些？

• Sass/SCSS
• Less
• Stylus

2. 预处理器的优势是什么？

• 变量：便于维护和修改
• 嵌套：代码结构更清晰
• 混合：代码复用
• 函数：动态计算
• 模块化：代码组织

3. Sass 和 Less 的区别？

• Sass: 功能更强大，支持更多特性
• Less: 语法更简单，学习曲线较低

4. 如何使用预处理器？

// 安装Sass
npm install -g sass

// 编译SCSS
sass input.scss output.css

// 监听文件变化
sass --watch input.scss:output.css

5. 预处理器的缺点是什么？

• 需要编译步骤
• 增加构建时间
• 调试困难
• 学习成本

通过理解CSS预处理器的各种特性和应用，可以编写更加高效和可维护的CSS代码。