$gray-base: #000;
html, body {height: 100%; }
body {margin: 0; }
.wrapper {display: flex; }
.gray {
width: 10%; height: 100%;
&::after {display: block; font-size: 12px; text-align: center; color: rgb(130, 137, 238); }
}
@function gray($intensity, $alpha: 1) {
@return rgba($intensity, $intensity, $intensity, $alpha);
}
@mixin make-gray($color-level: 32) {
@for $i from 1 through $color-level {
$index: $color-level - $i + 1;
.gray-#{$index} {
background: gray(0, (100 / $color-level * $i / 100));
&::after {
content: "#{$index}";
}
}
}
}
@include make-gray();
scss 函数和循环
最新推荐文章于 2024-06-08 01:11:17 发布