SASS/SCSS 预处理器

1. SASS/SCSS 简介

1.1 SASS 与 SCSS 语法对比

SASS 提供两种语法格式以满足不同开发者的需求：

SASS（缩进语法）特点：

• 采用严格的缩进规则
• 省略分号和花括号
• 文件扩展名为 .sass
• 适合熟悉Python/Ruby等语言的开发者

示例：

nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block

SCSS（CSS扩展语法）特点：

• 完全兼容CSS3语法
• 使用花括号和分号
• 文件扩展名为 .scss
• 适合前端开发团队协作

示例：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

1.2 核心优势

SASS/SCSS 为CSS开发带来多项重要改进：

1. 变量系统：集中管理设计参数
2. 嵌套规则：直观反映DOM结构
3. 代码复用：通过混合和继承减少重复
4. 逻辑控制：支持条件和循环语句
5. 模块化：支持文件拆分和按需引入
6. 运算能力：处理数值、颜色和单位计算
7. 丰富函数：提供颜色操作等实用功能

1.3 环境配置

安装方法

通过npm安装最新版本：

npm install -g sass

编译命令

基础编译：

sass input.scss output.css

开发模式（实时编译）：

sass --watch src/:dist/

生产模式（压缩输出）：

sass src/main.scss dist/main.css --style=compressed

构建工具集成

webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass')
            }
          }
        ]
      }
    ]
  }
};

2. 核心功能详解

2.1 变量系统

基础变量

$primary-color: #3498db;
$base-font-size: 16px;
$font-stack: ('Helvetica', 'Arial', sans-serif);

变量作用域

$global-var: red; // 全局变量

.block {
  $local-var: blue; // 局部变量
  color: $local-var;
  
  &.modifier {
    color: $global-var;
  }
}

默认变量

$primary-color: #3498db !default; // 仅当未定义时生效

2.2 嵌套规则

选择器嵌套

nav {
  ul {
    margin: 0;
    
    li {
      display: inline-block;
      
      a {
        padding: 5px;
      }
    }
  }
}

父选择器引用

.btn {
  &-primary { background: blue; }
  &-secondary { background: gray; }
  
  &:hover { opacity: 0.8; }
  &.disabled { opacity: 0.5; }
}

属性嵌套

.font {
  family: sans-serif;
  size: 16px;
  weight: bold;
}

2.3 混合(Mixins)

基础混合

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  @include reset-list;
}

参数化混合

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0, 2px, 4px, rgba(0,0,0,0.1));
}

内容块

@mixin media($width) {
  @media (min-width: $width) {
    @content;
  }
}

.container {
  width: 100%;
  
  @include media(768px) {
    width: 750px;
  }
}

2.4 继承/占位符

基础继承

.message {
  padding: 10px;
  border: 1px solid #eee;
}

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

占位符选择器

%button-style {
  padding: 10px 15px;
  border-radius: 4px;
}

.primary-btn {
  @extend %button-style;
  background: blue;
}

2.5 运算系统

数值运算

$base-size: 16px;

.container {
  font-size: $base-size * 1.25;
  padding: $base-size / 2;
  width: 100% / 3;
}

颜色运算

$primary: #3498db;

.button {
  background: $primary;
  border: 1px solid darken($primary, 10%);
  
  &:hover {
    background: lighten($primary, 10%);
  }
}

2.6 函数系统

内置函数

$colors: (primary: #3498db, secondary: #2ecc71);

.element {
  color: map-get($colors, primary);
  background: mix(white, #3498db, 20%);
  width: percentage(2/3);
}

自定义函数

@function em($pixels, $context: 16px) {
  @return ($pixels / $context) * 1em;
}

h1 {
  font-size: em(32px); // 2em
}

3. 高级特性

3.1 控制指令

条件语句

@mixin theme($dark: false) {
  @if $dark {
    background: #333;
    color: #fff;
  } @else {
    background: #fff;
    color: #333;
  }
}

循环语句

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}

$sizes: small, medium, large;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
  }
}

3.2 模块系统

基础用法

// _variables.scss
$primary: #3498db !default;

// main.scss
@use 'variables' as vars;

.button {
  color: vars.$primary;
}

模块转发

// _library.scss
@forward 'variables';
@forward 'mixins';

// main.scss
@use 'library' as lib;

3.3 错误处理

调试工具

@debug "当前颜色值: #{$primary-color}";

@warn "不建议使用此混合，将在下个版本移除";

@error "无效的参数类型";

4. 工程化实践

4.1 目录结构

推荐的项目结构：

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _functions.scss
│   └── _mixins.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layouts/
│   ├── _header.scss
│   └── _footer.scss
└── main.scss

4.2 设计系统实现

设计令牌

// _tokens.scss
$tokens: (
  colors: (
    primary: #3498db,
    secondary: #2ecc71
  ),
  spacing: (
    base: 16px,
    small: 8px
  )
);

@function token($category, $key) {
  @return map-get(map-get($tokens, $category), $key);
}

响应式工具

$breakpoints: (
  mobile: 576px,
  tablet: 768px,
  desktop: 992px
);

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

5. 与现代CSS的配合

5.1 CSS变量集成

:root {
  --primary: #{$primary-color};
  --primary-dark: #{darken($primary-color, 10%)};
}

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

5.2 CSS原生嵌套

/* 编译为CSS后仍保持嵌套结构 */
.card {
  &__title {
    font-size: 1.2em;
    
    &:hover {
      color: blue;
    }
  }
}

6. 性能优化指南

1. 控制嵌套深度：建议不超过4层
2. 合理使用@extend：避免生成过多组合选择器
3. 混合优化：避免在混合中包含大量样式
4. 模块化分割：按需加载样式模块
5. 生产环境压缩：使用compressed输出样式

7. 常见问题解答

Q: SASS变量和CSS变量有何区别？ A: SASS变量在编译时确定，CSS变量在运行时可变

Q: 何时使用混合？何时使用继承？ A: 混合适合带参数的样式复用，继承适合静态样式复用

Q: 如何组织大型项目的样式？ A: 推荐采用ITCSS或7-1模式进行架构设计

附录：资源参考

1. 官方文档
2. SASS Playground
3. Awesome Sass