效果:

代码
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%);
}
}
}