Question

我想输出一些实用程序类，但似乎无法获得基色的较浅和较暗的色调来输出较暗和较浅的色调。我是Scss的新手，但这是我拥有的：

$aqua: #00ffff;

$color-map: (
  background-color-aqua-light: ($aqua, background-color, lighten,),
  color-aqua-light: ($aqua, color, lighten),
  background-color-aqua-dark: ($aqua, background-color, darken),
  color-aqua-dark: ($aqua, color, darken)
);

@each $color-class, $colour-variables in $color-map {

  $class-name: nth($color-class, 1);
  $color-name: nth($colour-variables, 1);
  $color-type: nth($colour-variables, 2);
  $color-brightness: nth($colour-variables, 3);


  @for $i from 20 through 100{
    @if $i % 10 == 0{
      $percentage: $i*0.5%;
      .#{$class-name}-#{$i}{
        #{$color-type}: #{$color-brightness}($color-name, $percentage);
      }
    }
  }
}

Answer 1

您似乎正在CSS中生成方法名称：

所以这个SCSS

#{$color-type}: #{$color-brightness}($color-name, $percentage);

成为此CSS

.background-color-aqua-light-40 {
  background-color: lighten(#00ffff, 20%);
}

据我所知，您不能插入SASS方法名称，并且无法让SASS对其进行解释。 但是。我想您可以（也许不太优雅）通过@if中的@elseif和@for规则来克服这个限制循环。

@for $i from 20 through 100 {
    @if $i % 10 == 0 {
      $percentage: $i*0.5%;
      .#{$class-name}-#{$i} {
        @if ( $color-brightness == lighten ) {
          #{$color-type}: lighten($color-name, $percentage);
        } @elseif ( $color-brightness == darken ) {
          #{$color-type}: darken($color-name, $percentage);
        }
      }
    }
  }

编辑： FWIW，我在sassmeister.com上测试了@if/@elseif解决方案，它似乎可以解决您所需要的CSS。

输出较浅和较深的颜色变体

1 个答案: