scss 函数和循环

最新推荐文章于 2025-09-14 21:27:16 发布

原创最新推荐文章于 2025-09-14 21:27:16 发布 · 1k 阅读

CC 4.0 BY-SA版权

$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();