CSS 预处理器：Sass的基本用法、核心特性 - 详解

关于 Sass（Syntactically Awesome Style Sheets） 的详细介绍，包括其基本用法、核心特性、语法差异（.scss vs .sass），以及多个经典实用示例。

---

一、什么是 Sass？

Sass 是一种 CSS 预处理器（CSS Preprocessor），它扩展了 CSS 的功能，允许你使用变量、嵌套、混合（mixin）、函数、条件、循环等“编程式”语法来编写样式，最终编译为标准的 CSS 文件供浏览器使用。

✅ 主要优势：

• 减少重复代码
• 提高可维护性
• 支持模块化开发
• 更强的逻辑控制能力（条件、循环）
• 更好的团队协作与主题定制

---

二、Sass 两种语法格式

Sass 支持两种语法，功能相同，只是写法不同：

格式	文件扩展名	特点
SCSS（Sassy CSS）	.scss	类似 CSS 语法，使用 {} 和 ;，推荐使用
Sass（缩进语法）	.sass	缩进代替括号，无分号，类似 Python

✅ 推荐使用 .scss，因为它与 CSS 完全兼容，学习成本低。

---

三、Sass 核心特性与用法

1. 变量（Variables）

使用 $ 定义变量，用于存储颜色、字体、尺寸等，便于统一管理。

// 定义变量
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;
$border-radius: 4px;
// 使用变量
.button {
  background-color: $primary-color;
  font-family: $font-stack;
  border-radius: $border-radius;
}

编译后：

.button {
background-color: #007bff;
font-family: 'Helvetica Neue', sans-serif;
border-radius: 4px;
}

---

2. 嵌套（Nesting）

允许在父选择器中嵌套子元素，结构更清晰。

.navbar {
  background: #333;
  padding: 1rem;
  .nav-link {
    color: white;
    text-decoration: none;
    &:hover {
      color: $primary-color;
    }
  }
  .logo {
    font-weight: bold;
  }
}

编译后：

.navbar {
background: #333;
padding: 1rem;
}
.navbar .nav-link {
color: white;
text-decoration: none;
}
.navbar .nav-link:hover {
color: #007bff;
}
.navbar .logo {
font-weight: bold;
}

& 表示父选择器，常用于 :hover, :focus, 伪类等。

---

3. 混合（Mixins）

类似“函数”，可定义可复用的样式块，支持参数和默认值。

// 定义一个带阴影的 mixin
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0,0,0,0.1)) {
  box-shadow: $x $y $blur $color;
}
// 使用 mixin
.card {
  @include box-shadow(0, 4px, 8px, rgba(0,0,0,0.15));
}
.button {
  @include box-shadow();
}

编译后：

.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

---

4. 继承（Extend）

让一个选择器继承另一个的样式，减少重复。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}

编译后：

.success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}

%placeholder 是占位符选择器，不会输出到 CSS，仅用于继承。

---

5. 函数（Functions）

Sass 内置大量函数（如 lighten(), darken(), rgba()），也可自定义函数。

$base-color: #007bff;
.button-primary {
  background-color: $base-color;
  border-color: darken($base-color, 10%);
  color: lighten($base-color, 40%);
}

编译后：

.button-primary {
background-color: #007bff;
border-color: #005ecc;
color: #b3d9ff;
}

---

6. 条件与循环（@if / @for / @each / @while）

Sass 支持编程逻辑，适合生成复杂样式。

示例：使用 @each 生成按钮主题

$themes: (
  primary: #007bff,
  success: #28a745,
  danger:  #dc3545,
  warning: #ffc107
);
@each $name, $color in $themes {
  .btn-#{$name} {
    background-color: $color;
    border-color: darken($color, 10%);
    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

编译后（部分）：

.btn-primary {
background-color: #007bff;
border-color: #005ecc;
}
.btn-primary:hover {
background-color: #005ecc;
}
/* ... 其他主题 */

示例：使用 @for 生成栅格类

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

编译后：

.col-1 { width: 8.333%; }
.col-2 { width: 16.667%; }
/* ... */
.col-12 { width: 100%; }

---

四、模块化与文件组织（@use / @import）

推荐使用 @use（Sass 1.23+ 推荐）

// _variables.scss
$primary: #007bff;
$spacing: 1rem;
// _mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
// main.scss
@use 'variables' as vars;
@use 'mixins';
.card {
  margin: vars.$spacing;
  @include mixins.center;
}

_ 开头的文件是“部分文件”（partial），不会单独编译。

---

⚙️ 五、如何使用 Sass？

1. 安装 Sass

npm install -g sass

2. 编译 SCSS 到 CSS

sass input.scss output.css

3. 开启监听模式（开发时）

sass --watch input.scss output.css

4. 在项目中使用（如 Webpack/Vite）

• 使用 sass-loader（Webpack）
• 或直接在 Vue/React 项目中引入 .scss 文件

---

六、经典实用示例

✅ 示例 1：响应式断点混合（Responsive Mixins）

// _mixins.scss
@mixin mobile {
  @media (max-width: 768px) { @content; }
}
@mixin tablet {
  @media (min-width: 769px) and (max-width: 1024px) { @content; }
}
@mixin desktop {
  @media (min-width: 1025px) { @content; }
}
// 使用
.container {
  padding: 2rem;
  @include mobile {
    padding: 1rem;
  }
  @include desktop {
    max-width: 1200px;
    margin: 0 auto;
  }
}

---

✅ 示例 2：创建主题切换（CSS 变量 + Sass）

:root {
  --primary-color: #{$primary};
  --text-color: #333;
}
[data-theme="dark"] {
  --primary-color: #{darken($primary, 20%)};
  --text-color: #eee;
}
.theme-toggle {
  background: var(--primary-color);
  color: white;
}

---

✅ 示例 3：生成图标类（@each）

$icons: (
  home: "\e900",
  user: "\e901",
  settings: "\e902"
);
@each $name, $code in $icons {
  .icon-#{$name}:before {
    content: $code;
    font-family: 'IconFont';
  }
}

---

✅ 总结：Sass 的核心价值

特性	用途
$变量	统一管理颜色、字体、间距
@mixin	封装可复用样式（阴影、动画）
@include	调用 mixin
@extend	继承样式，减少冗余
嵌套	提高结构可读性
@each/@for	批量生成类（栅格、主题）
@use	模块化组织样式文件

---

推荐学习资源

• 官网：https://sass-lang.com
• Sass 中文网：https://www.sass.hk
• 工具：Sass Playground（在线编译测试）

---

一句话总结：
Sass = CSS + 变量 + 函数 + 逻辑 + 模块化，是现代前端开发不可或缺的样式编程工具。