Sass 数据类型 #

// 无单位数字
$opacity: 0.8;
$z-index: 100;

// 有单位数字
$width: 100px;
$font-size: 1.5rem;
$line-height: 1.5;

// 长度单位
$px: 10px;
$em: 1.5em;
$rem: 2rem;
$vw: 100vw;
$vh: 100vh;
$percent: 50%;

// 时间单位
$duration: 0.3s;
$delay: 100ms;

// 角度单位
$rotation: 45deg;
$angle: 1rad;

// 相同单位运算
$width: 100px + 50px;  // 150px

// 单位转换
$inches: 1in;          // 96px
$converted: $inches + 10px;  // 106px

// 单位消除
$ratio: 100px / 50px;  // 2（无单位）

// 取整
round(4.6);     // 5
ceil(4.2);      // 5
floor(4.8);     // 4

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

// 比较
max(10, 20);    // 20
min(10, 20);    // 10

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

// 单位操作
unit(10px);     // "px"
unitless(10px); // false
unitless(10);   // true

$quoted: "Hello World";
$single: 'Hello World';

.element {
  content: "Hello";
  font-family: "Helvetica Neue", sans-serif;
}

$unquoted: Helvetica;
$property: margin;

.element {
  font-family: $unquoted, sans-serif;
  #{$property}: 10px;
}

// 大小写转换
to-upper-case("hello");  // "HELLO"
to-lower-case("HELLO");  // "hello"

// 长度
str-length("hello");     // 5

// 查找
str-index("hello", "ll");  // 3

// 插入
str-insert("hello", " world", 6);  // "hello world"

// 截取
str-slice("hello", 1, 3);  // "hel"

// 引号操作
quote(hello);      // "hello"
unquote("hello");  // hello

$name: "container";
$size: "large";

// 选择器插值
.#{$name} {
  width: 100%;
}

// 属性值插值
.element {
  content: "Size: #{$size}";
}

// 颜色名称
$color: red;
$color: steelblue;

// 十六进制
$hex: #fff;
$hex: #ffffff;
$hex: #ff0000;

// RGB
$rgb: rgb(255, 0, 0);
$rgba: rgba(255, 0, 0, 0.5);

// HSL
$hsl: hsl(0, 100%, 50%);
$hsla: hsla(0, 100%, 50%, 0.5);

$base: #3498db;

// 变亮
lighten($base, 20%);  // 更亮

// 变暗
darken($base, 20%);   // 更暗

// 增加饱和度
saturate($base, 20%);

// 降低饱和度
desaturate($base, 20%);

// 灰度
grayscale($base);

// 设置透明度
rgba($base, 0.5);

// 增加不透明度
opacify($base, 0.3);
fade-in($base, 0.3);

// 降低不透明度
transparentize($base, 0.3);
fade-out($base, 0.3);

// 混合两种颜色
mix(red, blue, 50%);  // 紫色

// 调整色调
adjust-hue($base, 30deg);

// 补色
complement($base);

// 反色
invert($base);

$color: #3498db;

// RGB 分量
red($color);    // 52
green($color);  // 152
blue($color);   // 219

// HSL 分量
hue($color);        // 204deg
saturation($color); // 70%
lightness($color);  // 53%
alpha($color);      // 1

// 创建颜色变体
@function color-variant($color, $amount: 10%) {
  @return (
    base: $color,
    light: lighten($color, $amount),
    dark: darken($color, $amount)
  );
}

// 获取对比色
@function contrast-color($color) {
  @if lightness($color) > 50% {
    @return black;
  } @else {
    @return white;
  }
}

// 空格分隔
$space-list: 10px 20px 30px;

// 逗号分隔
$comma-list: a, b, c;

// 混合
$mixed: 1px solid #ccc;

// 嵌套列表
$nested: (1 2 3), (4 5 6);

$list: 10px, 20px, 30px;

// 长度
length($list);  // 3

// 获取元素（索引从1开始）
nth($list, 1);   // 10px
nth($list, -1);  // 30px（最后一个）

// 设置元素
set-nth($list, 1, 15px);  // 15px, 20px, 30px

// 添加元素
append($list, 40px);  // 10px, 20px, 30px, 40px

// 合并列表
join((1, 2), (3, 4));  // 1, 2, 3, 4

// 查找索引
index($list, 20px);  // 2

// 是否包含
@function contains($list, $value) {
  @return index($list, $value) != false;
}

$breakpoints: 576px, 768px, 992px, 1200px;

@each $bp in $breakpoints {
  @media (min-width: $bp) {
    // ...
  }
}

// 生成方向类
$directions: top, right, bottom, left;

@each $dir in $directions {
  .m-#{$dir} {
    margin-#{$dir}: 10px;
  }
}

// 多值属性
$shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
.box {
  box-shadow: $shadow;
}

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

// 嵌套映射
$colors: (
  primary: (
    base: #3498db,
    light: #5dade2,
    dark: #2980b9
  ),
  secondary: (
    base: #2ecc71,
    light: #58d68d,
    dark: #27ae60
  )
);

$map: (
  primary: #3498db,
  secondary: #2ecc71
);

// 获取值
map-get($map, primary);  // #3498db

// 合并映射
map-merge($map, (danger: #e74c3c));

// 获取所有键
map-keys($map);  // primary, secondary

// 获取所有值
map-values($map);  // #3498db, #2ecc71

// 检查键是否存在
map-has-key($map, primary);  // true

// 遍历映射
@each $key, $value in $map {
  .text-#{$key} {
    color: $value;
  }
}

$colors: (
  primary: (
    base: #3498db,
    light: #5dade2
  )
);

// 自定义深度获取函数
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

.element {
  color: map-deep-get($colors, primary, base);  // #3498db
}

// 设计令牌
$tokens: (
  colors: (
    primary: #3498db,
    secondary: #2ecc71,
    danger: #e74c3c
  ),
  spacing: (
    sm: 8px,
    md: 16px,
    lg: 24px
  ),
  fonts: (
    base: 16px,
    sm: 14px,
    lg: 18px
  )
);

@function token($category, $key) {
  @return map-deep-get($tokens, $category, $key);
}

.element {
  color: token(colors, primary);
  padding: token(spacing, md);
  font-size: token(fonts, base);
}

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

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

$condition1: true;
$condition2: false;

// 与
$result: $condition1 and $condition2;  // false

// 或
$result: $condition1 or $condition2;   // true

// 非
$result: not $condition1;              // false

$value: 100px;

$greater: $value > 50px;    // true
$less: $value < 50px;       // false
$equal: $value == 100px;    // true
$not-equal: $value != 50px; // true

@mixin theme($dark: false) {
  @if $dark {
    background-color: #1a1a1a;
    color: #ffffff;
  } @else {
    background-color: #ffffff;
    color: #333333;
  }
}

body {
  @include theme(true);
}

$value: null;

.element {
  // null 不会输出任何内容
  margin: $value;
}

// 编译后：margin 不会出现
.element { }

@if $value == null {
  // 值为空
}

@if $value != null {
  // 值不为空
}

@mixin optional-property($value: null) {
  @if $value != null {
    margin: $value;
  }
}

.element {
  @include optional-property(10px);  // 输出 margin
  @include optional-property;        // 不输出
}

// 获取类型
type-of(10px);      // "number"
type-of("hello");   // "string"
type-of(red);       // "color"
type-of((1, 2, 3)); // "list"
type-of((a: b));    // "map"
type-of(true);      // "bool"
type-of(null);      // "null"

// 类型检查
@function is-number($value) {
  @return type-of($value) == 'number';
}

@function is-color($value) {
  @return type-of($value) == 'color';
}

@function is-map($value) {
  @return type-of($value) == 'map';
}

// 数字转字符串
inspect(10px);  // "10px"

// 列表转字符串
$list: 1, 2, 3;
inspect($list);  // "1, 2, 3"

// 好
$colors: (
  primary: #3498db,
  secondary: #2ecc71
);

// 不好
$color-primary: #3498db;
$color-secondary: #2ecc71;

@function get-color($name) {
  @if type-of($name) != 'string' {
    @error "Color name must be a string";
  }
  @return map-get($colors, $name);
}

@function get-value($map, $key, $default: null) {
  @if map-has-key($map, $key) {
    @return map-get($map, $key);
  }
  @return $default;
}