Sass 基础用法速览

1. 什么是 Sass？

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的功能，允许你使用变量、嵌套、混合、继承等高级特性，从而让样式表更易维护和复用。

Sass 有两种语法：

• .scss（Sassy CSS）：和 CSS 语法几乎一样，推荐使用。
• .sass：缩进式语法，不用大括号和分号。

本教程主要以 .scss 语法为例。

---

2. 安装 Sass

2.1 使用 npm 安装（推荐）

npm install -g sass

2.2 使用 Dart Sass（官方推荐）

下载地址：https://sass-lang.com/install

2.3 使用 GUI 工具

如 Koala 或 Prepros。

---

3. Sass 基本用法

3.1 编译 Sass

sass input.scss output.css

实时监听：

sass --watch input.scss:output.css

---

4. Sass 语法详解

4.1 变量

$primary-color: #3498db;
$padding: 16px;.button {color: $primary-color;padding: $padding;
}

4.2 嵌套

.nav {ul {margin: 0;li {display: inline-block;a {color: $primary-color;}}}
}

4.3 父选择器引用（&）

.button {color: white;&:hover {color: yellow;}
}

4.4 注释

// 单行注释，不会编译到 CSS
/* 多行注释，会编译到 CSS */

4.5 混合（Mixin）

@mixin border-radius($radius) {border-radius: $radius;
}.box {@include border-radius(10px);
}

4.6 继承（Extend）

%base-btn {padding: 10px 20px;border: none;
}.btn-primary {@extend %base-btn;background: $primary-color;
}

4.7 运算

.container {width: 100% - 20px;padding: $padding / 2;
}

4.8 条件语句（@if, @else）

$theme: dark;body {@if $theme == dark {background: #222;color: #fff;} @else {background: #fff;color: #222;}
}

4.9 循环（@for, @each, @while）

@for $i from 1 through 3 {.col-#{$i} {width: 100px * $i;}
}$colors: red, green, blue;
@each $color in $colors {.text-#{$color} {color: $color;}
}

---

5. 模块化与导入

5.1 分文件管理

创建 _variables.scss, _mixins.scss, _base.scss 等。

5.2 导入文件

@use 'variables';
@use 'mixins';
@use 'base';

注意：Sass 推荐使用 @use 替代旧的 @import。

---

6. 实战示例

6.1 目录结构

/scss├── _variables.scss├── _mixins.scss├── _base.scss└── main.scss

6.2 代码示例

_variables.scss

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;

_mixins.scss

@mixin flex-center {display: flex;justify-content: center;align-items: center;
}

_base.scss

body {font-family: $font-stack;color: $primary-color;
}

main.scss

@use 'variables';
@use 'mixins';
@use 'base';.header {@include mixins.flex-center;height: 60px;background: variables.$primary-color;
}

---

7. 常见问题

• Sass 和 Less 有什么区别？
  • Sass 功能更强大，社区更活跃，推荐使用。
• 如何在 Vue/React 项目中使用 Sass？
  • 安装 sass 依赖，直接在 .vue 或 .jsx 文件中引入 .scss 文件即可。
• @import 和 @use 有什么区别？
  • @use 更现代，支持命名空间，避免变量冲突。

---

8. 参考资料

• Sass 官方文档
• Sass 中文网