Sass中的颜色函数

效果:

代码

css 复制代码
<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​

用途:直接调整颜色的某个属性(如亮度、饱和度、透明度等),通过绝对值增减。

语法:

bash 复制代码
color.adjust($color, $property1: value, $property2: value, ...)

参数(可组合使用):

  • $hue:调整色相(单位:deg)。
  • $saturation:调整饱和度(百分比)。
  • $lightness:调整亮度(百分比)。
  • <math xmlns="http://www.w3.org/1998/Math/MathML"> w h i t e n e s s / whiteness / </math>whiteness/blackness:调整白度/黑度(百分比,需避免与 $lightness 同时使用)。
  • $alpha:调整透明度(0-1 或百分比)。

特点:

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

示例:

less 复制代码
$base-color: #3498db;

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

2. color.scale​

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

语法:

bash 复制代码
color.scale($color, $property1: percent, $property2: percent, ...)

参数(可组合使用):

  • 支持的属性同 color.adjust( <math xmlns="http://www.w3.org/1998/Math/MathML"> h u e , hue, </math>hue,saturation, $lightness 等)。
  • 参数值为百分比(如 20% 表示向最大值方向调整 20%,-30% 表示向最小值方向调整 30%)。

特点:

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

示例:

less 复制代码
$base-color: #3498db;

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

sass数组用法

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

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

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

关键特性:

  • 索引从 1 开始(非 0)
  • 动态长度:无需预定义大小,自动扩展
  • 混合分隔符:不同层级可用不同分隔符区分
perl 复制代码
$mixed-list: "top" 10px, "right" 20px; // 第一层逗号,第二层空格

遍历方法

1. @each​ 循环(直接遍历元素)

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

swift 复制代码
$sizes: 12px, 18px, 24px;

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

输出 CSS:

arduino 复制代码
.text-1 { font-size: 12px; }
.text-2 { font-size: 18px; }
.text-3 { font-size: 24px; }
2. @for​ 循环(按索引遍历)

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

less 复制代码
@for $i from 1 through length($colors) {
  .box-#{$i} {
    background: nth($colors, $i);  // 根据索引获取元素
    &:hover {
      background: lighten(nth($colors, $i), 10%);
    }
  }
}
相关推荐
vvilkim1 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing1 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
写代码的小王吧3 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇3 小时前
CSS 渐变色
前端
snow@li4 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇4 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)4 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy4 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七5 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七5 小时前
14.Python Socket客户端开发指南
前端·python