Question

有人可以向我解释为什么我的调色板中的背景颜色不能正常工作？

// UI Colors

// Call the color palette modifiers in color values
@function palette($palette, $shade: 'base') {
  @return map-get(map-get($color-palettes, $palette), $shade);
}

$white: #fff;
$black: #0b0b0b;
$grey : #797e83;

$color-palettes: (
    grey: (
        xx-light : lighten($grey, 43%),
        x-light  : lighten($grey, 35%),
        light    : lighten($grey, 12%),
        base     : $grey,
        dark     : darken($grey, 8%),
        x-dark   : darken($grey, 16%)
    ),
    black: (
        light : lighten($black, 10%),
        base  : $black,
        dark  : darken($black, 10%)
    )
);

$ui-colors: (
  sidebar-close : $white,
  filter-close  : $white,
  search-close  : palette(black, dark),
);

// Generate modifier color classes
@mixin bg-colors($map) {
  @each $theme, $color in $map {
    &-#{$theme} {
      background-color: $color;
    }
  }
}

.btn {
  @include colors($ui-colors);

}

结果：

.btn-search-open {
    background-color: invalid not working;
}

所以什么时候渲染我的bg没有人知道它发生了什么？

Answer 1

我编写了一个函数palette，它从map中返回一个键值。

Sassmeister demo。

SCSS：

$white : #fff;
$black : #0b0b0b;
$grey  : #797e83;

$color-palettes: (
    grey: (
        xx-light : lighten($grey, 43%),
        x-light  : lighten($grey, 35%),
        light    : lighten($grey, 12%),
        base     : $grey,
        dark     : darken($grey, 8%),
        x-dark   : darken($grey, 16%)
    ),
    black: (
        light : lighten($black, 10%),
        base  : $black,
        dark  : darken($black, 10%)
    )
);

@function palette($palettes, $palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}

$ui-colors: (
  sidebar-close : $white,
  filter-close  : $white,
  search-close  : palette($color-palettes, black, dark)
);

@mixin bg-colors($map) {
  @each $theme-name, $theme in $map {
    &-#{$theme-name} {
      background-color: $theme;
    } 
  }
}

.btn {
  @include bg-colors($ui-colors);
}

Css输出：

.btn-sidebar-close {
  background-color: #fff;
}
.btn-filter-close {
  background-color: #fff;
}
.btn-search-close {
  background-color: black;
}

sass调色板不能在mixin中工作

1 个答案: