Sass 运算符 #

// 数字加法
$width: 100px + 50px;  // 150px

// 不同单位（会转换）
$size: 10px + 1em;  // 11px（以第一个单位为准）

// 字符串拼接
$message: "Hello" + " " + "World";  // "Hello World"

.element {
  width: 100px + 50;  // 150px
  margin: 10px + 5px;  // 15px
}

$width: 100px - 50px;  // 50px
$size: 10px - 5;       // 5px

.element {
  width: 200px - 100px;  // 100px
  margin: 20px - 10px;   // 10px
}

$width: 100px * 2;   // 200px
$size: 10px * 3;     // 30px

.element {
  width: 50px * 2;   // 100px
  padding: 10px * 3; // 30px
}

// 注意：不能两个值都有单位
// $error: 10px * 10px;  // 错误！

// 除法需要括号或变量
$width: (100px / 2);  // 50px
$base: 100px;
$half: $base / 2;     // 50px

.element {
  width: (200px / 4);  // 50px
  font-size: (16px / 16px) * 1rem;  // 1rem
}

// 在 CSS 中 / 用于分隔值
.font {
  font: 16px / 1.5 sans-serif;  // 这是 CSS 语法，不是除法
}

$remainder: 10 % 3;  // 1

// 实际应用：创建网格
@function grid-width($columns) {
  @return ($columns % 12) * 8.333%;
}

// 等于
@if $value == 10 { }

// 不等于
@if $value != 10 { }

// 示例
$theme: dark;

@if $theme == dark {
  body {
    background-color: #1a1a1a;
  }
}

// 小于
@if $width < 100px { }

// 大于
@if $width > 100px { }

// 小于等于
@if $width <= 100px { }

// 大于等于
@if $width >= 100px { }

// 示例
@mixin responsive-text($size) {
  @if $size < 14px {
    font-size: 14px;
  } @else if $size > 24px {
    font-size: 24px;
  } @else {
    font-size: $size;
  }
}

// 两个条件都为真
@if $width > 100px and $width < 200px {
  // 宽度在 100px 到 200px 之间
}

// 示例
@mixin button($size, $color) {
  @if $size == large and $color == primary {
    padding: 20px 40px;
    background-color: blue;
  }
}

// 任一条件为真
@if $size == small or $size == medium {
  // 小号或中号
}

// 示例
@mixin text-style($type) {
  @if $type == heading or $type == title {
    font-weight: bold;
  }
}

// 条件取反
@if not $is-dark {
  // 不是暗色主题
}

// 示例
$use-rounded: false;

.button {
  @if not $use-rounded {
    border-radius: 0;
  }
}

@if ($width > 100px and $width < 200px) or $width == 300px {
  // 宽度在 100-200px 之间，或者等于 300px
}

@if not ($is-dark or $is-compact) {
  // 既不是暗色主题，也不是紧凑模式
}

// 使用 + 拼接
$prefix: "icon-";
$name: "home";
$class: $prefix + $name;  // "icon-home"

.element {
  content: "Hello" + " " + "World";  // "Hello World"
}

// 动态类名
$size: "large";
.button-#{$size} {
  padding: 20px;
}

$name: "container";
$property: "margin";

.#{$name} {
  #{$property}: 0 auto;
}

// 编译后
.container {
  margin: 0 auto;
}

// 基本单位
$base-font-size: 16px;

// px 转 rem
@function px-to-rem($px) {
  @return ($px / $base-font-size) * 1rem;
}

// rem 转 px
@function rem-to-px($rem) {
  @return $rem * $base-font-size;
}

.element {
  font-size: px-to-rem(24px);  // 1.5rem
  margin: px-to-rem(32px);     // 2rem
}

// 相同单位：结果保持单位
100px + 50px   // 150px

// 不同单位：以第一个单位为准
100px + 1in    // 196px（1in = 96px）

// 无单位数字与有单位数字
100px * 2      // 200px
100px / 2      // 50px

// 两个有单位数字相除
100px / 50px   // 2（无单位）

// 从高到低
1. ()              // 括号
2. * / %           // 乘除取模
3. + -             // 加减
4. < > <= >=       // 比较
5. == !=           // 相等性
6. and             // 逻辑与
7. or              // 逻辑或
8. not             // 逻辑非

// 不使用括号
$result: 10 + 20 * 2;  // 50（先乘后加）

// 使用括号
$result: (10 + 20) * 2;  // 60（先加后乘）

// 复杂表达式
$width: (100px + 50px) * 2 - 50px;  // 250px

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

@function column-width($span) {
  $total-gutter: ($columns - 1) * $gutter;
  $available: $container-width - $total-gutter;
  @return ($available / $columns) * $span + ($span - 1) * $gutter;
}

.col-6 {
  width: column-width(6);
}

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

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

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

$primary: #3498db;

.button {
  background-color: $primary;
  
  &:hover {
    // 变暗 10%
    background-color: darken($primary, 10%);
  }
  
  &:active {
    // 变暗 20%
    background-color: darken($primary, 20%);
  }
}

// 自定义颜色函数
@function color-level($color, $level: 0) {
  @if $level > 0 {
    @return lighten($color, $level * 10%);
  } @else if $level < 0 {
    @return darken($color, abs($level) * 10%);
  }
  @return $color;
}

@mixin theme-aware($key, $color) {
  @if $color == light {
    #{$key}: white;
  } @else if $color == dark {
    #{$key}: black;
  } @else {
    #{$key}: $color;
  }
}

.element {
  @include theme-aware(background-color, light);
  @include theme-aware(color, dark);
}

// 计算网格间距
$columns: 12;
$gutter: 30px;

@function calculate-width($span, $offset: 0) {
  $column-width: 100% / $columns;
  $gutter-offset: $gutter * ($span - 1) / $span;
  
  @return $column-width * $span - $gutter-offset + $offset;
}

.col-6 {
  width: calculate-width(6);
}

// 四舍五入
round(4.4);  // 4
round(4.6);  // 5

// 向上取整
ceil(4.2);   // 5

// 向下取整
floor(4.8);  // 4

// 绝对值
abs(-10);    // 10

// 最大值
max(10, 20, 30);  // 30

// 最小值
min(10, 20, 30);  // 10

// 限制范围
@function clamp($value, $min, $max) {
  @return if($value < $min, $min, if($value > $max, $max, $value));
}

// 0-1 随机数
random();     // 0.xxxxx

// 1-n 随机整数
random(100);  // 1-100 随机整数

// 生成随机颜色
@function random-color() {
  @return rgb(random(255), random(255), random(255));
}

// 好
$width: ($padding * 2) + $content-width;

// 不好
$width: $padding * 2 + $content-width;

// 好
$width: 100px + 50px;

// 不好（可能产生意外结果）
$width: 100px + 1em;

// 好
$base-spacing: 8px;
$double-spacing: $base-spacing * 2;
$triple-spacing: $base-spacing * 3;

// 不好
.element {
  margin: 8px * 2;
  padding: 8px * 3;
}