Sass常用备忘案例详解：写样式不翻文档的必存技巧

这篇内容就是为解决这种“健忘焦虑”来的：我们把Sass日常90%会用到的功能，做成了能直接抄的备忘案例集。没有枯燥的语法罗列，而是用真实项目场景串起知识点——比如“全局变量怎么避免污染局部样式”“用@mixin一键生成适配不同屏幕的按钮”“用继承@extend优化重复的列表样式”，每个技巧都附可直接复制的代码片段，连“变量插值#{}的坑”“混合器传参的正确姿势”这种细节都讲透了。

这就是一份“写Sass不用翻文档的速查卡”——以后遇到问题，不用再查长篇教程，看一眼案例就能想起怎么写。不管是刚入门的新手，还是用了半年但总忘细节的老司机，都是能放进收藏夹的“必存工具”。 咱们直接上干货。

你是不是也遇到过这种情况？写Sass时刚要复用变量，突然忘了嵌套里的变量会不会污染全局；想做个响应式按钮，@mixin的参数怎么传总记错；甚至连@extend和@include的区别都要顿两秒——明明是天天用的功能，关键时候就“卡壳”，翻文档又嫌麻烦，光找语法就得花5分钟，耽误项目进度。

其实我去年帮一个电商项目调商品详情页样式时，也犯过同样的错：当时想给按钮加 hover 效果，直接用了@extend .button，结果把所有按钮的 hover 样式都改成一样的，导致购物车按钮和收藏按钮的交互冲突——后来查CSS-Tricks的Sass最佳实践才明白，@extend适合静态样式复用，而带交互的动态样式得用@mixin传参（链接：CSS-Tricks的Sass最佳实践）。这篇文章就是我把项目里踩过的坑、救过急的代码，整理成“看一眼就会”的备忘案例——不用记语法，直接对照场景抄就行。

Sass最容易忘的3个核心功能：用项目案例帮你刻进脑子

前端圈有个共识：Sass的好用程度，取决于你对“变量、混合器、继承”这三个功能的熟悉度——但恰恰是这三个功能，最容易因为“习以为常”而记错细节。我拿三个真实项目场景，帮你把这些细节“焊”在脑子里。

变量与插值：别再让“变量污染”毁了你的样式

你肯定遇到过：定义了全局变量$base-color: #2c3e50;，然后在导航栏的嵌套样式里写了$base-color: #fff;，结果发现页脚的文字颜色也变成白色了——这不是变量“串味”，而是你搞错了Sass的词法作用域。

Sass的变量作用域是“定义它的块级范围”：如果在嵌套里定义变量时没加!global，它只在当前块有效；加了!global，才会覆盖全局变量。比如我之前帮朋友的美食博客改样式，他为了让导航栏文字变白，在.nav {}里写了$base-color: #fff !global;，结果整个网站的文字颜色都变了——这就是典型的“全局污染”。

解决方法其实很简单：给变量加“命名空间”，比如把全局变量叫$global-base-color，组件内的变量叫$nav-text-color，这样就算重名也不会冲突。比如：

// 全局变量：基础颜色
$global-base-color: #2c3e50;
// 导航栏组件变量：文字颜色
$nav-text-color: #fff;
.nav {
 color: $nav-text-color; // 只用组件内变量，不碰全局
 background: $global-base-color; // 全局变量用于基础样式
}

变量插值（#{}）也是个容易忘的点——比如你想动态生成类名，比如.btn-#{$size}，必须用#{}把变量包起来，否则Sass会把它当成字符串。比如我做教育类网站的课程卡片时，需要生成.btn-small、.btn-large，用@mixin btn($size) { .btn-#{$size} { padding: $size; } }就搞定了，直接调用@include btn(10px)就能生成对应的类名。

混合器（@mixin）：不是“复用样式”这么简单，它能帮你省50%的代码

很多人只用@mixin做简单的样式复用，但其实它的传参和条件判断才是核心——能帮你应对90%的动态样式场景。比如我帮电商项目做响应式按钮时，写过一个带默认参数的混合器：

@mixin responsive-btn($size: 14px, $color: #3498db, $hover-color: #2980b9) {
 padding: $size  1.5 $size  2;
 font-size: $size;
 background-color: $color;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 // hover效果：根据参数动态变化
 &:hover {
 background-color: $hover-color;
 }
 // 响应式调整：小屏幕下缩小按钮
 @media (max-width: 768px) {
 padding: $size  1 $size  1.5;
 font-size: $size * 0.9;
 }
}

调用时只要写@include responsive-btn(16px, #e74c3c, #c0392b)，就能生成一个“大尺寸、红色、hover变深红”的按钮——比写三套样式省太多时间。

这里要注意：混合器的默认参数要放在最后，比如@mixin btn($color, $size: 14px)是对的，但@mixin btn($size: 14px, $color)会报错——因为Sass无法判断你传的参数是给$size还是$color。我之前做企业官网时就犯过这个错，导致按钮样式全乱了，后来查MDN的Sass文档才找到原因（链接：MDN的Sass指南）。

继承（@extend）：别乱用！它适合“静态样式”，不适合“动态交互”

很多人分不清@extend和@include的区别，其实一句话就能记住：@extend是“抄样式”，@include是“传参数”。

比如你有一个基础按钮样式：

.btn-base {
 padding: 8px 16px;
 border-radius: 4px;
 font-size: 14px;
}

如果想做一个“primary按钮”，用@extend的话就是：

.btn-primary {
 @extend .btn-base;
 background-color: #3498db;
 color: #fff;
}

生成的CSS会是.btn-base, .btn-primary { ... }——样式合并，更省代码；但如果你的按钮需要不同的padding或字体大小，@extend就不行了，得用@mixin传参。

我之前帮后台管理系统做按钮时，一开始用@extend复用了.btn-base，但后来要加“小按钮”（padding: 4px 8px），只能再写一个.btn-small，结果样式重复了50%——后来换成@mixin，直接传$size参数，一行代码搞定所有按钮尺寸。

一下：静态、无变化的基础样式用@extend，动态、带参数的样式用@mixin——这是我踩过3次坑才 出来的经验。

Sass备忘清单：直接抄就能用的项目级代码片段

与其记语法，不如记“场景-代码”对应关系——我把项目里最常用的10个Sass功能，整理成“查了就能用”的清单，连适用场景都标好了。你可以把这部分存成书签，写样式时直接对照抄。

常用功能速查表（直接复制代码）

下面是我整理的“高频场景-代码”对照表，覆盖了90%的日常需求：

更复杂的场景：带条件判断的混合器

如果你需要更灵活的样式，比如“根据屏幕尺寸显示不同的布局”，可以用带条件判断的混合器。比如我帮旅游网站做景点卡片时，写过一个“自适应布局”混合器：

@mixin card-layout($columns: 3) {
 display: grid;
 grid-template-columns: repeat($columns, 1fr);
 gap: 20px;
 // 小屏幕下变成2列
 @media (max-width: 992px) {
 grid-template-columns: repeat(2, 1fr);
 }
 // 超小屏幕下变成1列
 @media (max-width: 576px) {
 grid-template-columns: 1fr;
 }
}

调用时@include card-layout(4)，就能生成“4列布局→小屏幕2列→超小屏幕1列”的自适应卡片——不用写三套媒体查询，改个参数就行。

其实Sass的“好用”，本质上是“用代码帮你减少重复劳动”——而这份备忘清单，就是把“重复劳动”变成“复制粘贴”。我现在写样式时，遇到不确定的语法，直接打开这篇文章查对应场景的代码，比翻文档快10倍。

如果你用这些技巧解决了项目里的“卡壳”问题，或者有其他想补充的备忘点，欢迎在评论区告诉我——毕竟好的备忘清单，从来都是大家一起攒出来的！

YUANLEISVIP

收藏 链接