SCSS——CSS的扩展和进化

一、SCSS是什么？

SCSS（Sassy CSS） 就相当于CSS（层叠样式表）突然获得了编程语言的力量——可以写变量、玩函数、拆模块，甚至是“继承”样式！实际上，SCSS就是一个让前端开发者效率飙升的CSS预处理器。它像一台“代码编译器”，将你写的SCSS转换成标准CSS。

SCSS vs Sass：

• Sass：最早期的语法，依赖缩进（类似Python），写起来像这样：

.button
  padding: 10px
  &:hover
    background: #f00

• SCSS：兼容CSS的“升级版”，用{}和;（更符合程序员直觉）：

.button {
  padding: 10px;
  &:hover {
    background: #f00;
  }
}

二、为什么要用SCSS？

1. 变量：像乐高一样复用颜色和尺寸

传统CSS重复写#ff5733让人抓狂，SCSS用变量一键统改：

// 定义变量
$primary-color: #ff5733;
$spacing: 1rem;

.button {
  background: $primary-color;
  padding: $spacing;
}

// 编译后的CSS：
// .button { background: #ff5733; padding: 1rem; }

2. 嵌套：告别“俄罗斯套娃式选择器”

不再重复写.parent .child，代码层级一目了然：

.navbar {
  background: #333;
  // 嵌套子元素
  .logo {
    width: 100px;
    // 嵌套伪类
    &:hover {
      opacity: 0.8;
    }
  }
}
// 编译后：
// .navbar { background: #333; }
// .navbar .logo { width: 100px; }
// .navbar .logo:hover { opacity: 0.8; }

3. 混合宏（Mixins）：一键生成重复代码块

像函数一样封装样式，支持传参：

// 定义混合宏：弹性盒子居中
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 调用
.header {
  @include flex-center();
}
.sidebar {
  @include flex-center(column);
}

4. 继承（Extend）：样式的“基因复制”

让多个选择器共享同一组样式：

%button-base {
  padding: 10px 20px;
  border-radius: 4px;
}

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

.danger-button {
  @extend %button-base;
  background: red;
}

5. 模块化：像拼图一样组织代码

拆分成多个文件，按需引入：

// _variables.scss（局部文件，下划线开头）
$font-stack: Helvetica, sans-serif;

// main.scss
@use 'variables';
body {
  font-family: variables.$font-stack;
}

三、SCSS实战：5分钟打造一个“动态主题按钮”

// 定义主题变量
$themes: (
  light: (bg: #fff, text: #333),
  dark: (bg: #222, text: #fff)
);

// 混合宏：根据主题应用样式
@mixin theme($name) {
  $colors: map-get($themes, $name);
  background: map-get($colors, bg);
  color: map-get($colors, text);
}

// 生成不同主题的按钮
.button {
  padding: 12px 24px;
  border: none;
  @include theme(light); // 默认主题

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

编译后的CSS：

.button {
  padding: 12px 24px;
  border: none;
  background: #fff;
  color: #333;
}
.button-dark {
  background: #222;
  color: #fff;
}

四、如何开始玩转SCSS？—— 安装与工具链

1. 安装编译器（任选其一）：

• Node.js环境：npm install -g sass

• VSCode插件：Live Sass Compiler（实时编译）

• 在线工具：Sassmeister（边写边预览）

2. 命令行编译：

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

3. 现代框架集成：

• React/Vue：通过Webpack + sass-loader

• Next.js：内置支持.module.scss

五、SCSS的优势

1. 更强大的逻辑控制：循环、条件语句、函数计算

2. 成熟的模块化生态：@use、@forward依赖管理

3. 兼容性无忧：编译后的CSS兼容所有浏览器

4. 代码量减少50%：告别重复劳动

5. 维护性提升：修改变量，全局生效

6. 团队协作更规范：通过Mixins和模块约束样式

🚀入门小tips 🚀
从“变量替换颜色”开始，逐步尝试嵌套和混合宏。记住，SCSS不是魔法，但能让你的CSS拥有“超级赛亚人”般的战斗力！