当前位置：首页 > news >正文

Sass 详细指南

news 2026/7/26 8:26:00

Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，扩展了 CSS 的语法，增加了变量、嵌套、混合、继承等特性，让 CSS 编写更高效、可维护。本文将从基础到进阶，结合实例讲解 Sass 核心知识点。

一、Sass 基础

1. 两种语法格式

Sass 有两种语法：

SCSS（Sassy CSS）：兼容 CSS 语法，后缀.scss，推荐使用。
缩进语法（Sass）：无大括号和分号，依赖缩进，后缀.sass。

示例：

// SCSS 语法（推荐） $primary-color: #2c3e50; body { color: $primary-color; } // Sass 缩进语法 $primary-color: #2c3e50 body color: $primary-color

2. 环境准备

需安装 Node.js，然后通过 npm 安装 Sass：

npminstall-g sass

编译命令：

# 将 scss 文件编译为 css（实时监听变化）sass --watch src/style.scss dist/style.css

二、核心特性（附实例）

1. 变量（Variables）

用于复用重复的值（颜色、字体、尺寸等），以$开头。

基本用法

// 定义变量 $primary-color: #3498db; // 主色调 $font-size-base: 16px; // 基础字体大小 $container-width: 1200px;// 容器宽度 // 使用变量 body { color: $primary-color; font-size: $font-size-base; } .container { max-width: $container-width; }

变量作用域

局部变量：仅在定义的块内生效；
全局变量：在全局定义，或用!global标记。

$global-color: #000; // 全局变量 .box { $local-color: #f00 !global; // 转为全局变量 color: $global-color; } .text { color: $local-color; // 可访问，因为已转为全局 }

变量默认值

用!default标记，仅在变量未定义时生效（适合组件开发）。

$btn-color: #fff !default; // 若未定义 $btn-color，默认值生效 .btn { background: $primary-color; color: $btn-color; }

2. 嵌套（Nesting）

模拟 HTML 层级结构，减少重复选择器，提高可读性。

基本嵌套

// SCSS .nav { width: 100%; background: #f5f5f5; // 嵌套子选择器 .nav-item { padding: 10px 15px; float: left; // 嵌套伪类 &:hover { color: $primary-color; } // 嵌套属性（如 font、margin） font: { size: 14px; weight: 500; } } }

编译后 CSS：

.nav{width:100%;background:#f5f5f5;}.nav .nav-item{padding:10px 15px;float:left;font-size:14px;font-weight:500;}.nav .nav-item:hover{color:#3498db;}

父选择器`&`

&代表父级选择器，常用于伪类、伪元素、BEM 命名。

.btn { padding: 8px 16px; &-primary { // 等同于 .btn-primary background: #3498db; } &:active { // 等同于 .btn:active transform: scale(0.98); } &::after { // 等同于 .btn::after content: ""; display: inline-block; } }

3. 混合（Mixins）

可复用的代码块，支持传参，适合处理浏览器前缀、重复样式。

基本定义与使用

用@mixin定义，@include引入。

// 定义无参混合 @mixin clearfix { &::after { content: ""; display: table; clear: both; } } // 定义带参混合（可设默认值） @mixin flex($direction: row, $align: center) { display: flex; flex-direction: $direction; align-items: $align; } // 使用混合 .box { @include clearfix; @include flex(column, flex-start); // 传参覆盖默认值 } .nav { @include flex; // 使用默认值 }

编译后 CSS：

.box::after{content:"";display:table;clear:both;}.box{display:flex;flex-direction:column;align-items:flex-start;}.nav{display:flex;flex-direction:row;align-items:center;}

处理浏览器前缀

@mixin transform($property) { -webkit-transform: $property; -moz-transform: $property; -ms-transform: $property; transform: $property; } .box { @include transform(rotate(30deg)); }

4. 继承（Extend）

用@extend继承另一个选择器的所有样式，适合共享基础样式。

基本用法

// 基础样式 .base-btn { padding: 8px 16px; border-radius: 4px; cursor: pointer; border: none; } // 继承基础样式并扩展 .primary-btn { @extend .base-btn; background: #3498db; color: #fff; } .secondary-btn { @extend .base-btn; background: #e74c3c; color: #fff; }

编译后 CSS：

.base-btn, .primary-btn, .secondary-btn{padding:8px 16px;border-radius:4px;cursor:pointer;border:none;}.primary-btn{background:#3498db;color:#fff;}.secondary-btn{background:#e74c3c;color:#fff;}

占位符选择器（%）

仅被继承时生效，不会编译到 CSS 中，避免冗余。

// 占位符选择器（不会单独编译） %base-btn { padding: 8px 16px; border-radius: 4px; } .primary-btn { @extend %base-btn; background: #3498db; }

编译后 CSS（无%base-btn相关样式）：

.primary-btn{padding:8px 16px;border-radius:4px;}.primary-btn{background:#3498db;}

5. 运算（Operations）

支持数字（加减乘除）、颜色、字符串运算，单位会自动兼容。

数字运算

$width: 100px; $gap: 20px; .box { width: $width - 20; // 80px（单位自动补全） margin: $gap / 2; // 10px padding: $width * 0.5; // 50px height: $width + 50%; // 100px + 50%（兼容不同单位） }

颜色运算

支持 RGB/HSL 颜色的加减，或用内置函数调整。

$base-color: #3498db; .box { // 颜色相加（R/G/B 分别加） color: $base-color + #111; // #45a9ec // 调整亮度 background: lighten($base-color, 10%); // 变亮10% // 调整饱和度 border-color: saturate($base-color, 20%); // 饱和度+20% }

字符串运算

用+拼接字符串。

$prefix: "icon-"; .icon-home { content: $prefix + "home"; // "icon-home" }

6. 条件语句（Conditionals）

用@if/@else if/@else实现条件样式。

$theme: dark; // 可切换 light/dark body { @if $theme == dark { background: #000; color: #fff; } @else if $theme == light { background: #fff; color: #000; } @else { background: #f5f5f5; color: #333; } }

7. 循环语句（Loops）

@for 循环

遍历数字范围，支持from ... through（包含结束值）或from ... to（不包含）。

// 生成 .col-1 到 .col-12 @for $i from 1 through 12 { .col-#{$i} { // #{$i} 插值语法，嵌入变量 width: (100% / 12) * $i; } }

编译后 CSS（部分）：

.col-1{width:8.33333%;}.col-2{width:16.66667%;}/* ... */.col-12{width:100%;}

@each 循环

遍历列表/映射（Map）。

// 遍历列表 $colors: primary #3498db, secondary #e74c3c, success #2ecc71; @each $name, $color in $colors { .text-#{$name} { color: $color; } } // 遍历映射 $theme-map: ( dark: #000, light: #fff, gray: #f5f5f5 ); @each $key, $value in $theme-map { .bg-#{$key} { background: $value; } }

@while 循环

满足条件时循环。

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

8. 函数（Functions）

自定义可复用的计算逻辑，用@function定义，@return返回值。

// 定义函数：计算响应式字体大小 @function rem($px, $base: 16px) { @return ($px / $base) * 1rem; } // 使用函数 body { font-size: rem(16px); // 1rem } h1 { font-size: rem(24px); // 1.5rem }

9. 导入（Import）

Sass 的@import可导入其他 Sass 文件，且会合并编译，避免 CSS 多请求。

导入 SCSS 文件

// _variables.scss（下划线开头的文件为「局部文件」，不会单独编译） $primary-color: #3498db; // style.scss @import "variables"; // 无需后缀和下划线 body { color: $primary-color; }

导入 CSS 文件

若导入.css文件，会被编译为原生 CSS@import：

@import "reset.css"; // 编译后为 @import url(reset.css);

三、进阶技巧

1. 插值语法（#{}）

将变量嵌入选择器、属性名、字符串中，核心用法已在循环/混合中体现：

$attr: color; $selector: header; #{$selector} { border-#{$attr}: #333; // border-color: #333 #{$attr}: #666; // color: #666 }

2. 颜色函数

Sass 内置丰富的颜色处理函数：

rgb($r, $g, $b)：生成 RGB 颜色；
rgba($color, $alpha)：添加透明度；
lighten($color, $percent)：提亮；
darken($color, $percent)：变暗；
complement($color)：补色；
mix($color1, $color2, $weight)：混合两种颜色。

$color: #3498db; .box { color: rgba($color, 0.8); // 透明度 0.8 background: darken($color, 15%); // 变暗15% border: 1px solid mix($color, #000, 20%); // 混合颜色 }

3. 列表与映射

列表（List）

空格/逗号分隔的值集合，类似数组：

$fonts: "Roboto", "Arial", sans-serif; $sizes: 12px 14px 16px; // 取值（索引从1开始） body { font-family: nth($fonts, 1); // Roboto font-size: nth($sizes, 3); // 16px }

映射（Map）

键值对集合，类似对象：

$breakpoints: ( sm: 576px, md: 768px, lg: 992px ); // 遍历映射 @each $name, $width in $breakpoints { @media (min-width: $width) { .container-#{$name} { max-width: $width; } } }