Sass中的颜色函数

效果：

代码

<template>
  <div class="btns">
    <div class="btn">按钮</div>
    <div class="btn">按钮</div>
    <div class="btn">按钮</div>
    <div class="btn">按钮</div>
    <div class="btn">按钮</div>
  </div>
</template>

<style lang="scss" scoped>
// 必须引入颜色模块
@use "sass:color";
// 必须引入列表模块
@use "sass:list";

.btns {
  display: flex;
  align-items: center;
  gap: 20px;
  $colors: #409eff, #91f55f, #f6b554, #f75555, #909399;

  .btn {
    color: #fff;
    border-radius: 6px;
    display: inline-block;
    margin-left: 20px;
    margin-top: 5px;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
  }

  // 按索引遍历(从1开始)
  @for $i from 1 through list.length($colors) {
    .btn:nth-child(#{$i}) {
      // 获取列表中的第$i个元素
      background: list.nth($colors, $i);
      &:hover {
        // 调整亮度
        background: color.adjust(list.nth($colors, $i), $lightness: 15%);
      }
      &:active {
        // 降低亮度
        background: color.scale(list.nth($colors, $i), $lightness: -15%);
      }
    }
  }
}
</style>

相关知识

1. color.adjust​

用途：直接调整颜色的某个属性（如亮度、饱和度、透明度等），通过绝对值增减。

语法：

color.adjust($color, $property1: value, $property2: value, ...)

参数（可组合使用）：

• ​$hue​：调整色相（单位：deg​）。
• ​$saturation​：调整饱和度（百分比）。
• ​$lightness​：调整亮度（百分比）。
• ​$whiteness​ /$blackness​：调整白度/黑度（百分比，需避免与 $lightness​ 同时使用）。
• ​$alpha​：调整透明度（0-1​ 或百分比）。

特点：

• 直接对属性做加减操作，结果会被限制在颜色值的有效范围内（如 0-100%​）。
• 如果调整后的值超出范围，会被截断到边界值。

示例：

$base-color: #3498db;

.adjusted-color {
  // 增加 20% 亮度，减少 10% 饱和度，透明度减少 0.2
  background: color.adjust($base-color, $lightness: 20%, $saturation: -10%, $alpha: -0.2);
}

---

2. color.scale​

用途：按比例调整颜色属性，使其在有效范围内平滑过渡，避免截断。

语法：

color.scale($color, $property1: percent, $property2: percent, ...)

参数（可组合使用）：

• 支持的属性同 color.adjust​（$hue​,$saturation​, $lightness​ 等）。
• 参数值为百分比（如 20%​ 表示向最大值方向调整 20%，-30%​ 表示向最小值方向调整 30%）。

特点：

• 按比例缩放颜色属性，不会超出有效范围。
• 适合需要动态调整颜色但避免极端值的情况。

示例：

$base-color: #3498db;

.scaled-color {
  // 将亮度向最大值方向调整 30%，饱和度向最小值方向调整 15%
  background: color.scale($base-color, $lightness: 30%, $saturation: -15%);
}

sass数组用法

Sass 的数组通过 逗号或空格分隔 的序列实现，支持任意数据类型（颜色、字符串、嵌套列表等）

// 定义基础数组
$colors: #f5ad1b, #5f89ce, #94bf45;  // 逗号分隔
$spaces: "item-1" "item-2" "item-3"; // 空格分隔

// 定义嵌套数组（二维）
$matrix: ( ("a", "b"), ("c", "d") );  // 括号明确层级

关键特性：

• 索引从 1 开始（非 0）
• 动态长度：无需预定义大小，自动扩展
• 混合分隔符：不同层级可用不同分隔符区分

$mixed-list: "top" 10px, "right" 20px; // 第一层逗号，第二层空格

遍历方法

1. @each​ 循环（直接遍历元素）

适用于按顺序处理每个元素

$sizes: 12px, 18px, 24px;

@each $size in $sizes {
  .text-#{index($sizes, $size)} {  // 获取索引
    font-size: $size;
  }
}

输出 CSS：

.text-1 { font-size: 12px; }
.text-2 { font-size: 18px; }
.text-3 { font-size: 24px; }

2. @for​ 循环（按索引遍历）

适合需要精准控制索引的场景

@for $i from 1 through length($colors) {
  .box-#{$i} {
    background: nth($colors, $i);  // 根据索引获取元素
    &:hover {
      background: lighten(nth($colors, $i), 10%);
    }
  }
}