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) // 4ceil(3.2) // 4floor(3.7) // 3 | |
| 模块系统 | @use(推荐) | 导入模块并命名空间 | @use 'variables' as vars;color: vars.$primary-color; |
实际开发建议
变量：用于主题色、间距、字体等设计系统值
混合宏：封装常用CSS模式（flex布局、清除浮动等）
嵌套：适度使用，避免过度嵌套导致选择器过于复杂
模块化：使用
@use替代@import（Sass新版特性）函数：处理复杂的计算逻辑，提高代码复用性
典型项目结构
styles/ ├── abstracts/ │ ├── _variables.scss # 变量 │ ├── _mixins.scss # 混合宏 │ └── _functions.scss # 函数 ├── components/ # 组件样式 ├── layout/ # 布局样式 ├── pages/ # 页面特定样式 └── main.scss # 主入口文件
这些语法在Vue/React项目、响应式设计、主题定制等场景中应用广泛，能显著提升CSS开发效率和维护性。