SCSS 完整指南

什么是 SCSS？

SCSS（Sassy CSS）是 CSS 的超集，是一种 CSS 预处理器，为 CSS 添加了变量、嵌套、混合器、继承等功能，使 CSS 更加可维护、可扩展和易于编写。

安装与设置

1. 安装 Sass

# 使用 npm 安装
npm install -g sass

# 或使用 yarn
# yarn global add sass

2. 基本使用

# 编译单个文件
sass input.scss output.css

# 监听文件变化并自动编译
sass --watch input.scss:output.css

# 监听整个目录
sass --watch src/scss:dist/css

3. 项目集成

Webpack 配置

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

Vite 配置

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`
      }
    }
  }
})

基本语法

1. 变量

// 定义变量
$primary-color: #4285f4;
$font-size: 16px;
$spacing: 1rem;

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

2. 嵌套

.nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;

    a {
      color: #333;
      text-decoration: none;

      &:hover {
        color: $primary-color;
      }
    }
  }
}

3. 混合器 (Mixins)

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

// 使用混合器
.container {
  @include flex-center;
  height: 100vh;
}

// 带参数的混合器
@mixin button($color, $padding: 10px) {
  background-color: $color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

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

4. 继承

// 基础样式
%btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 继承基础样式
.btn-primary {
  @extend %btn;
  background-color: $primary-color;
  color: white;
}

.btn-secondary {
  @extend %btn;
  background-color: #6c757d;
  color: white;
}

5. 运算

$base-font-size: 16px;
$container-width: 1200px;

.container {
  width: $container-width;
  font-size: $base-font-size;
}

.sidebar {
  width: $container-width * 0.25; // 300px
  font-size: $base-font-size * 0.875; // 14px
}

高级特性

1. 条件语句

@mixin theme($theme: light) {
  @if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else if $theme == light {
    background-color: #fff;
    color: #333;
  } @else {
    background-color: #f5f5f5;
    color: #333;
  }
}

.dark-theme {
  @include theme(dark);
}

.light-theme {
  @include theme(light);
}

2. 循环

1. For 循环

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

2. Each 循环

$colors: (
  primary: #4285f4,
  secondary: #34a853,
  warning: #fbbc05,
  error: #ea4335
);

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

3. While 循环

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    font-size: 10px * $i;
  }
  $i: $i + 1;
}

3. 函数

// 定义函数
@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

// 使用函数
.container {
  font-size: px-to-rem(14px);
  padding: px-to-rem(20px);
}

4. 导入

// 导入其他 SCSS 文件
@import 'variables';
@import 'mixins';
@import 'components/buttons';
@import 'components/forms';

5. 占位符选择器

// 占位符选择器，不会生成单独的 CSS
%clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 继承占位符
.header {
  @extend %clearfix;
}

.footer {
  @extend %clearfix;
}

最佳实践

1. 文件结构

scss/
├── variables.scss       // 变量定义
├── mixins.scss         // 混合器定义
├── functions.scss      // 函数定义
├── reset.scss          // 重置样式
├── base.scss           // 基础样式
├── components/         // 组件样式
│   ├── buttons.scss
│   ├── forms.scss
│   └── cards.scss
├── layout/             // 布局样式
│   ├── header.scss
│   ├── footer.scss
│   └── grid.scss
└── main.scss           // 主文件，导入所有其他文件

2. 命名规范

• 使用 kebab-case 命名选择器
• 变量名使用蛇形命名法（snake_case）
• 混合器和函数名使用驼峰命名法（camelCase）

3. 代码风格

• 缩进使用 2 个空格
• 每个选择器占一行
• 大括号与选择器在同一行
• 每个属性占一行
• 冒号后加一个空格
• 分号作为每个属性的结束
• 大括号后另起一行

4. 性能优化

• 避免过度嵌套（不超过 3-4 层）
• 使用占位符选择器代替类选择器进行继承
• 合理使用变量和混合器，避免生成冗余代码
• 利用 CSS 变量（自定义属性）与 SCSS 变量结合使用

常见问题与解决方案

1. 嵌套过深

问题：嵌套过深会导致生成的 CSS 选择器过长，影响性能。

解决方案：限制嵌套深度，通常不超过 3-4 层。

// 不好的做法
.nav {
  ul {
    li {
      a {
        &:hover {
          color: red;
        }
      }
    }
  }
}

// 好的做法
.nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: #333;

    &:hover {
      color: red;
    }
  }
}

2. 变量作用域问题

问题：变量在不同作用域中的行为可能导致意外结果。

解决方案：了解变量的作用域规则，必要时使用 !global 标记。

// 局部变量
$color: red;

.container {
  $color: blue; // 局部变量，只在 .container 内有效
  color: $color; // 输出 blue
}

.text {
  color: $color; // 输出 red
}

// 使用 !global 标记
$color: red;

.container {
  $color: blue !global; // 全局变量
  color: $color; // 输出 blue
}

.text {
  color: $color; // 输出 blue
}

3. 混合器与继承的选择

问题：不确定何时使用混合器，何时使用继承。

解决方案：

• 当需要传递参数时，使用混合器
• 当需要共享相同样式结构时，使用继承
• 对于不会单独使用的样式，使用占位符选择器

4. 编译错误

问题：SCSS 编译时出现错误。

解决方案：

• 检查语法错误（如缺少分号、大括号不匹配）
• 检查变量和混合器是否正确定义
• 检查导入路径是否正确
• 使用 sass --watch 命令查看详细错误信息

工具与资源

1. 工具

• Sass：官方 SCSS 编译器
• Node-sass：Node.js 绑定的 Sass 编译器
• Dart Sass：使用 Dart 语言实现的 Sass 编译器
• PostCSS：可以与 SCSS 配合使用的 CSS 处理工具

2. 框架与库

• Bootstrap：使用 SCSS 构建的前端框架
• Foundation：使用 SCSS 构建的响应式前端框架
• Bulma：基于 Flexbox 的现代 CSS 框架
• Tailwind CSS：实用优先的 CSS 框架（使用 PostCSS，但理念类似）

3. 学习资源

• Sass 官方文档
• Sass 指南
• CSS-Tricks: Sass 系列教程
• SCSS 语法速查表

总结

SCSS 是一个强大的 CSS 预处理器，通过添加变量、嵌套、混合器、继承等功能，使 CSS 更加灵活和可维护。合理使用 SCSS 可以大大提高开发效率，减少代码冗余，使样式代码更加清晰和易于管理。

在使用 SCSS 时，应遵循最佳实践，注意代码结构和性能优化，以充分发挥其优势。