函数与运算

预处理器提供强大的运算和函数能力，实现动态样式计算。

数学运算

基本运算

// Sass
$base: 10px;

.container {
  width: 100px + 50px;      // 150px
  padding: $base * 2;        // 20px
  margin: 100px - 30px;      // 70px
  font-size: 16px / 2;       // 8px（需括号或变量）
  font-size: (16px / 2);     // 8px
}

// Less
@base: 10px;

.container {
  width: 100px + 50px;       // 150px
  padding: @base * 2;         // 20px
  font-size: 16px / 2;       // 8px（Less 直接支持）
}

单位转换

$px: 32px;

.container {
  font-size: $px;                    // 32px
  font-size: $px / 16px * 1rem;      // 2rem
}

颜色函数

Sass 颜色函数

$color: #3498db;

.box {
  // 调整明暗
  background: lighten($color, 20%);   // 变亮 20%
  background: darken($color, 20%);    // 变暗 20%

  // 调整饱和度
  background: saturate($color, 20%);  // 增加饱和度
  background: desaturate($color, 20%); // 降低饱和度

  // 调整透明度
  background: rgba($color, 0.5);      // 设置透明度
  background: opacify($color, 0.3);    // 增加不透明度
  background: transparentize($color, 0.3); // 增加透明度

  // 颜色混合
  background: mix(#3498db, #e74c3c, 50%); // 混合两色各 50%

  // 取反色
  background: invert($color);
}

Less 颜色函数

@color: #3498db;

.box {
  background: lighten(@color, 20%);
  background: darken(@color, 20%);
  background: fade(@color, 50%);       // 设置透明度
  background: mix(@color, #e74c3c, 50%);
}

实用配色方案

$primary: #3498db;

.button {
  background: $primary;

  &:hover {
    background: darken($primary, 10%);
  }

  &:active {
    background: darken($primary, 20%);
  }

  &:disabled {
    background: lighten($primary, 30%);
  }
}

内置函数

Sass 常用函数

字符串函数

$str: "hello world";

.container {
  content: to-upper-case($str);    // "HELLO WORLD"
  content: to-lower-case($str);    // "hello world"
  content: str-length($str);       // 11
  content: str-insert($str, "!", 12); // "hello world!"
}

Map 函数

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  background: map-get($colors, primary);  // #3498db

  // 遍历 map
  @each $name, $color in $colors {
    &--#{$name} {
      background: $color;
    }
  }
}

自定义函数

Sass 自定义函数

@function px-to-rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

.container {
  font-size: px-to-rem(14px);     // 0.875rem
  padding: px-to-rem(20px);        // 1.25rem
}

@function spacing($level) {
  $values: (0, 4px, 8px, 16px, 24px, 32px);
  @return nth($values, $level + 1);
}

.box {
  padding: spacing(2);  // 8px
  margin: spacing(4);   // 24px
}

Less 自定义函数

Less 需要使用 JavaScript 插件，或用 Mixin 模拟：

.px-to-rem(@px, @base: 16px) {
  font-size: (@px / @base) * 1rem;
}

实用示例

响应式字体

@function fluid-size($min, $max, $min-vw: 320px, $max-vw: 1200px) {
  @return clamp(#{$min}, calc(#{$min} + #{($max - $min)} * ((100vw - #{$min-vw}) / #{($max-vw - $min-vw)})), #{$max});
}

.title {
  font-size: fluid-size(16px, 32px);
}

生成间距工具类

$spacing: 0, 4, 8, 12, 16, 20, 24, 32;

@each $value in $spacing {
  .mt-#{$value} { margin-top: #{$value}px; }
  .mb-#{$value} { margin-bottom: #{$value}px; }
  .ml-#{$value} { margin-left: #{$value}px; }
  .mr-#{$value} { margin-right: #{$value}px; }
}

要点总结

• 预处理器支持加减乘除运算，自动处理单位
• 颜色函数：lighten/darken、saturate/desaturate、mix 等
• 内置函数：数学、字符串、列表、Map 操作
• Sass 支持 @function 定义自定义函数
• 结合循环和函数可生成工具类和响应式样式