scss @for与rgba函数巧妙使用

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-cell
				font-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;
}