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;
}

七、建议