Sass 提供了强大的运算功能，支持对数值、颜色、字符串、布尔值等进行操作，并能自动处理单位兼容性。以下是 Sass 运算的详细指南：

一、简介

1、常见类型

• 数值运算：使用标准的加减乘除符号：+, -, *, /。
• 颜色运算：支持 + 和 - 运算，结果为混合颜色。
• 字符串运算：使用 + 连接字符串，自动处理引号。
• 布尔运算：用于条件判断（如 @if 语句）。
• 变量引用：支持在运算中使用变量。
• 括号优先级：使用括号控制运算顺序。

2、运算符优先级

运算优先级遵循数学规则（可用括号调整）：

1. 乘除法优先级最高：*, /, %
2. 加减法优先级其次：+, -
3. 大小比较再次：<, >, <=, >=
4. 相当比较最低：==, !=

.example {
  width: 10px + 5px * 2; // 20px（先乘后加）
  height: (10px + 5px) * 2; // 30px
}

3、单位运算规则

• 兼容单位：相同单位可直接运算（如 10px + 5px → 15px）。

• 不兼容单位：不同单位运算会报错（如 10px + 2em → Error）。

• 复合单位：支持乘除生成新单位：

  $speed: 100km / 2h; // 50km/h（单位自动计算为 km/h）

二、详细介绍

1、基本算术运算

Sass 支持标准的加减乘除运算，语法与常规数学一致：

.container {
  width: 100px + 20px; // 120px
  height: 50% - 10%; // 40%
  padding: 10px * 2; // 20px
  margin: (30px / 2); // 15px（注意：除法需用括号或变量避免冲突）
}

2、除法运算的注意事项

Sass 中 / 符号可能被解析为 CSS 原生属性（如 font: 12px/1.5）。为确保运算，需满足以下条件之一：

• 使用变量：$width: 600px / 3;
• 用括号包裹：width: (600px / 3);
• 与其他运算符结合：width: 10px + 100px/2;

3、颜色运算

Sass 会将颜色分解为 RGBA 通道进行逐通道运算：

.color {
  color: #112233 + #445566; // #557799（RGB 各通道相加）
  background: rgba(255, 0, 0, 0.5) + rgba(0, 255, 0, 0.5); // rgba(255,255,0,0.5)
  border-color: #6699cc - 20; // 减少各通道值 → #4d7fb3
}

⚠️ 直接运算可能导致不符合预期的颜色，建议使用颜色函数（如 lighten(), mix()）。

4、字符串运算

使用 + 或空格连接字符串，自动处理引号：

$prefix: "data-";
.content {
  &::before {
    content: "Hello " + World; // "Hello World"（无引号字符串被包裹）
    attr: $prefix + "id"; // "data-id"
  }
}

5、布尔运算

用于条件判断（@if 语句）：

$is-dark: true;
$is-mobile: false;

@if $is-dark and not $is-mobile {
  .page {
    background: #000;
  }
}

三、实际应用场景

场景 1：响应式布局计算

$container-width: 1200px;
$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: ($container-width / $columns) * $i;
  }
}

场景 2：动态生成渐变色

$base-color: #3498db;

@for $i from 1 through 5 {
  .gradient-#{$i} {
    background: mix($base-color, white, 20% * $i);
  }
}

场景 3：间距系统

$spacing-unit: 8px;

.card {
  padding: $spacing-unit * 2; // 16px
  margin-bottom: $spacing-unit * 3; // 24px
}

四、注意事项

• 单位一致性：避免混合单位运算（如 px + %）。
• 颜色安全：优先使用 lighten()、darken() 等函数而非直接运算。
• 除法陷阱：明确使用括号或变量区分除法与 CSS 原生语法。

通过 Sass 运算，你可以动态计算样式值，减少重复代码，尤其适合构建响应式布局、设计系统或复杂动画逻辑。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24