sass高阶应用

Sass（尤其是 SCSS 语法）除了基础功能外，还提供了许多高级特性，可以实现更灵活、可维护的样式系统。以下是 Sass 的 高级语法和应用技巧，适合中大型项目或组件库开发。

---

一、控制指令（Control Directives）

1. @if / @else

用于根据条件生成不同的 CSS。

@mixin button-style($type) {background: #ccc;@if $type == primary {background: #3498db;color: white;} @else if $type == danger {background: #e74c3c;color: white;} @else {background: #ecf0f1;color: #333;}
}.btn {@include button-style(primary);
}

---

2. @for 循环

可用于批量生成类名，如网格布局、按钮大小等。

@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}

---

3. @each 遍历列表/Map

适用于遍历颜色、字体、断点等配置项。

$colors: (primary: #3498db,success: #2ecc71,danger:  #e74c3c
);@each $name, $color in $colors {.text-#{$name} {color: $color;}.bg-#{$name} {background-color: $color;}
}

---

4. @while 循环

虽然不常用，但可以用于特定逻辑。

$i: 6;
@while $i > 0 {.item-#{$i} {font-size: 10px + $i * 2;}$i: $i - 2;
}

---

二、函数与自定义逻辑

1. 自定义函数

使用 @function 创建返回值的函数。

@function calculate-rem($size) {$base-font-size: 16px;@return $size / $base-font-size * 1rem;
}body {font-size: calculate-rem(14px);
}

---

2. 内置函数

Sass 提供丰富的内置函数，包括：

• 颜色操作：lighten(), darken(), saturate(), fade-in(), adjust-color()
• 数学运算：percentage(), round(), ceil(), floor()
• 类型判断：type-of(), unit(), variable-exists()

示例：

$color: #3498db;.button {background-color: darken($color, 10%);border-color: lighten($color, 10%);
}

---

三、模块化与命名空间（@use / @forward）

推荐使用 Dart Sass，@import 已被弃用。

1. 模块化导入（@use）

// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables';body {background: variables.$primary-color;
}

2. 命名空间别名

@use 'variables' as vars;body {background: vars.$primary-color;
}

3. 转发模块（@forward）

用于创建“工具库”模块，将多个 Mixin/变量统一导出。

// _tools.scss
@forward 'mixins';
@forward 'functions';
@forward 'variables';

---

四、占位符选择器 %

用于定义不会直接输出到 CSS 中的“抽象类”，只能通过 @extend 使用。

%clearfix {&::after {content: '';display: table;clear: both;}
}.container {@extend %clearfix;
}

---

五、动态插值 #{}

用于在选择器、属性或值中插入变量或表达式。

$name: foo;
$attr: margin;.#{$name} {#{$attr}-top: 10px;
}

编译结果：

.foo {margin-top: 10px;
}

---

六、继承与组合（@extend）

允许一个选择器继承另一个选择器的样式。

.message {padding: 10px;border: 1px solid #ccc;
}.error {@extend .message;color: red;
}

编译为：

.message, .error {padding: 10px;border: 1px solid #ccc;
}.error {color: red;
}

---

七、建议

技术	说明
BEM 命名结合嵌套	.block { &__element { ... } &--modifier { ... } }
设计系统整合	将变量组织为 tokens/_colors.scss, tokens/_spacing.scss 等
动态响应式断点	使用 Map 定义媒体查询并循环生成
样式重置与 normalize	使用 _reset.scss 统一浏览器默认样式
主题切换机制	使用 @use 加载不同主题变量文件