Sass 基础完全指南：变量/嵌套/混合宏/继承/导入

小飞兽 Sass/Less 7 次阅读 2026-07-29

Introduction

Sass（Syntactically Awesome Style Sheets）是最成熟、功能最强大的 CSS 预处理器，它扩展了 CSS 的语法，提供了变量、嵌套、混合宏（Mixin）、继承、导入等强大特性，大幅提升样式代码的可维护性和复用性。Sass 有两种语法：SCSS（使用花括号，类似 CSS 超集）和 SASS（使用缩进，省略花括号）。本指南以 SCSS 为例，全面讲解 Sass 的核心特性。

基础语法

1. 变量

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$base-spacing: 16px;
$border-radius: 8px;
.button {
  color: $primary-color;
  font-family: $font-stack;
  padding: $base-spacing;
  border-radius: $border-radius;
}

2. 嵌套

nav {
  background: #2c3e50;
  ul { list-style: none; display: flex; gap: 20px; }
  li { display: inline-block; }
  &:hover { background: lighten(#2c3e50, 10%); }
  a {
    color: #fff;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    border: { width: 1px; style: solid; color: #ddd; }
  }
}

3. 混合宏（Mixin）

@mixin flex-center {
  display: flex; justify-content: center; align-items: center;
}
@mixin card($radius: 8px, $shadow: 0 2px 8px rgba(0,0,0,0.1)) {
  border-radius: $radius; box-shadow: $shadow; padding: 20px;
}
.box { @include flex-center; }
.card { @include card(12px, 0 4px 12px rgba(0,0,0,0.15)); }

4. 继承

%message-shared {
  padding: 10px 20px; border-radius: 4px; color: #333;
}
.message { @extend %message-shared; background: #e8f4f8; }
.error { @extend %message-shared; background: #fdeaea; color: #c0392b; }

5. 导入（Partials）

@import 'variables';
@import 'mixins';
@import 'base';

完整代码示例

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #2c3e50;
$bg-color: #ecf0f1;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$spacing: 16px;
$border-radius: 8px;
$breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px);
// _mixins.scss
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) { @content; }
  }
}
@mixin card($radius: $border-radius) {
  background: #fff; border-radius: $radius; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: $spacing;
}
@mixin flex-between { display: flex; justify-content: space-between; align-items: center; }
// style.scss
{ box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: $font-stack; color: $text-color; background: $bg-color; line-height: 1.6; }
.header {
  @include flex-between;
  background: $text-color; color: #fff; padding: $spacing;
  @include respond-to(md) { padding: $spacing * 1.5; }
  &__logo { font-size: 24px; font-weight: bold; }
  &__nav ul { list-style: none; display: flex; gap: $spacing; @include respond-to(sm) { gap: $spacing * 2; } }
  &__nav a { color: #fff; text-decoration: none; transition: opacity 0.2s; &:hover { opacity: 0.8; } }
}
.card-grid { display: grid; grid-template-columns: 1fr; gap: $spacing; @include respond-to(md) { grid-template-columns: repeat(2, 1fr); } @include respond-to(lg) { grid-template-columns: repeat(3, 1fr); } }
.card {
  @include card;
  &__title { font-size: 18px; margin-bottom: $spacing / 2; color: $primary-color; }
  &__body { font-size: 14px; color: #666; margin-bottom: $spacing; }
  &__footer { display: flex; justify-content: flex-end; gap: $spacing / 2; button { background: $primary-color; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.2s; &:hover { background: darken($primary-color, 10%); } } }
}
%alert-base { padding: $spacing; border-radius: $border-radius; margin-bottom: $spacing / 2; border-left: 4px solid; }
.alert-success { @extend %alert-base; background: lighten($secondary-color, 40%); border-color: $secondary-color; }
.alert-error { @extend %alert-base; background: lighten(#e74c3c, 40%); border-color: #e74c3c; }
@mixin button-variant($bg, $color) { background: $bg; color: $color; &:hover { background: darken($bg, 10%); } }
.btn { display: inline-block; padding: 10px 20px; border-radius: $border-radius; text-decoration: none; cursor: pointer; &--primary { @include button-variant($primary-color, #fff); } &--secondary { @include button-variant($secondary-color, #fff); } }

常见问题

Sass 变量和 CSS 自定义属性有何区别？ Sass 变量在编译时替换，CSS 变量在运行时可动态修改。两者互补：Sass 变量适合主题固定的配置，CSS 变量适合动态主题切换。

@extend 和 @mixin 怎么选？ @extend 适合语义化复用的类（如 %btn-base），生成并集选择器；@mixin 适合传参和包含样式块。大量使用 @extend 可能导致选择器膨胀。
Sass 编译后如何处理 @import？ Sass @import 在编译时合并文件，减少 HTTP 请求。

如何查看 Sass 编译错误？ 在命令行运行 sass --watch style.scss:style.css 会实时编译并显示错误信息。