SCSS @for与rgba函数使用

这里再次记录下~~~

效果图

template

<template><view class="list"><view class="item" :class="[`item-${(index + 1)}`, (currentIdx == index) ? 'active' : '']"v-for="(item, index) in 8" :key="index" @click="testTap(index)"><!-- 使用var函数 --><text class="item-txt" :style="{'--color': setColor}">{{ index + 1 }}</text></view></view>
</template>

js

data() {return {currentIdx: -1,setColor: '#d75efb',}
}testTap(idx) {this.currentIdx = idx;
},

scss

<style lang="scss" scoped>// 定义色值$color-list: #FDC376, #7474ec, #5da6fb, #ffad27, #d75efb, #9fff10, #FF691D, #FF1D17;@for $i from 1 through length($color-list) {// 获取数组 $i 对应的下标值 即颜色值$item: nth($color-list, $i);.item-#{$i} {color: $item;border: 1px solid $item;background: rgba($color: $item, $alpha: 0.12);@if $i <= 4 {font-size: 28rpx;} @else {font-size: 38rpx;}}}.list {.item {margin: 20rpx 0;text-align: center;&-cell { // item-cellfont-size: 60rpx;}}.active {transform: scale(1.05);transition: all 0.2s;}.item-txt {// color: var(--color);}}
</style>

其他用法

更多用法…

@each

@each $header, $size in (mini: 24rpx, medium: 28rpx, large: 32rpx) {.#{$header} {font-size: $size;}
}// 结果：
.mini {font-size: 24rpx;
}
.medium {font-size: 28rpx;
}
.large {font-size: 32rpx;
}

参数变量...

@mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ffad27, #d75efb, #9fff10;
.primary {@include colors($values...);
}// 结果：
.primary {color: #ffad27;background-color: #d75efb;border-color: #9fff10;
}

占位符选择器 %foo

%foo-abs {color: #5da6fb;
}
.box {@extend %foo-abs;
}// 结果：
.box {color: #5da6fb;
}

@at-root

.parent {background-color: red;@at-root {.child {font-size: 35rpx;}.child2 {font-size: 40rpx;}}	&:tChild {font-size: 22rpx;}
}// 结果：
.parent {background-color: red;
}
.child {font-size: 35rpx;
}
.child2 {font-size: 40rpx;
}
.parent:tChild {font-size: 22rpx;
}