Sass常用语法总结

Sass常用语法总结

类别	语法	说明	示例
变量	$变量名: 值;	存储可复用的值，如颜色、尺寸等	$primary-color: #3498db; $base-margin: 20px;
嵌套	选择器嵌套	简化CSS层级结构	nav { ul { margin: 0; } }
	父选择器 &	引用父选择器	a { &:hover { color: red; } }
局部文件与导入	_文件名.scss @import	创建模块化样式文件	@import 'variables'; @import 'mixins';
混合宏 (Mixin)	@mixin @include	定义可重用的样式块	@mixin flex-center { display: flex; justify-content: center; } .container { @include flex-center; }
函数	@function	自定义函数处理值	@function double($n) { @return $n * 2; } width: double(10px);
继承	@extend	共享一组CSS属性	.btn { padding: 10px; } .btn-primary { @extend .btn; background: blue; }
运算	算术运算	支持加减乘除和取余	width: 100% / 3; font-size: 12px + 2px;
控制指令	@if / @else	条件判断	@if lightness($color) > 50% { background: black; }
	@for	循环生成样式	@for $i from 1 through 3 { .item-#{$i} { width: 20px * $i; } }
	@each	遍历列表	@each $animal in dog, cat, bird { .#{$animal}-icon { background: url('#{$animal}.png'); } }
	@while	条件循环	$i: 1; @while $i < 4 { .item-#{$i} { width: 20px * $i; } $i: $i + 1; }
插值	#{}	在属性名或选择器中插入变量	$side: top; margin-#{$side}: 10px;
颜色函数	lighten() / darken()	调整颜色亮度	lighten(#3498db, 20%) darken(#3498db, 20%)
	rgba()	设置颜色透明度	rgba($primary-color, 0.5)
	mix()	混合两种颜色	mix(#3498db, #e74c3c, 50%)
注释	// 注释 /* 注释 */	单行注释（不编译到CSS） 多行注释（可编译）	// 这段是单行注释 /* 这段是多行注释 */
内置函数	percentage()	转换为百分比	width: percentage(0.5); // 50%
	round() / ceil() / floor()	数值取整	round(3.7) // 4 ceil(3.2) // 4 floor(3.7) // 3
模块系统	@use (推荐)	导入模块并命名空间	@use 'variables' as vars; color: vars.$primary-color;

---

实际开发建议

1. 变量：用于主题色、间距、字体等设计系统值

2. 混合宏：封装常用CSS模式（flex布局、清除浮动等）

3. 嵌套：适度使用，避免过度嵌套导致选择器过于复杂

4. 模块化 ：使用@use替代@import（Sass新版特性）

5. 函数：处理复杂的计算逻辑，提高代码复用性

---

典型项目结构

styles/
├── abstracts/
│   ├── _variables.scss    # 变量
│   ├── _mixins.scss       # 混合宏
│   └── _functions.scss    # 函数
├── components/            # 组件样式
├── layout/               # 布局样式
├── pages/                # 页面特定样式
└── main.scss             # 主入口文件

---

这些语法在Vue/React项目、响应式设计、主题定制等场景中应用广泛，能显著提升CSS开发效率和维护性。