scss 使用Sass的实用程序类

Posted 2021-05-17

$ds-color-map: (
  green-100: #c8e6c9,
  green-200: #a5d6a7,
  green-300: #81c784
);

@mixin color-utilities {
  @each $name, $hex in $ds-colors-map {
    &-#{$name} {
      color: $hex;
    }
  }
}

.u-color-text {
  @include color-utilities();
}

/* 
Result:
.u-color-text-green-100 {
  color: #c8e6c9;
}
.u-color-text-green-200 {
  color: #a5d6a7;
}
.u-color-text-green-300 {
  color: #81c784;
}
*/

$ds-color-map: (
  green-100: #c8e6c9,
  green-200: #a5d6a7,
  green-300: #81c784
);

@mixin color-utilities($property: 'color') {
  @each $name, $hex in $vf-colors-map {
    &-#{$name} {
      #{$property}: $hex;
    }
  }
}

.u-color-text {
  @include color-modifiers();
}
.u-color-background {
  @include color-modifiers(background-color);
}

/*
Result:

.u-color-text-green-100 {
  color: #c8e6c9;
}

.u-color-background-green-100 {
  background-color: #c8e6c9;
}

.u-color-border-green-100 {
  border-color: #c8e6c9;
}
*/
.u-color-border {
  @include color-modifiers(border-color);
}