Question

我正在使用sass调色板，我想知道如何使这个功能适用于超过1个调色板。

现在我可以使用这个功能的1个调色板，怎样才能使这个功能适用于多个调色板？

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



$primary-palette: (
    grey: (
        xx-light : lighten($grey, 43%),
        x-light  : lighten($grey, 35%),
        light    : lighten($grey, 6%),
        base     : $grey,
        dark     : darken($grey, 8%),
        x-dark   : darken($grey, 16%)
    ),  
);

//将成为我的辅助通讯

  $secondary-palette: (
            black: (
                light    : lighten($grey, 6%),
                base     : $grey,
                dark     : darken($grey, 8%),
                x-dark   : darken($grey, 16%)
            ),  
        );

在css中应用

body {
  background-color: palette(grey,dark);
}

有人可以帮忙吗？感谢

Answer 1

我之前没有做过这样的事情，但它看起来非常强大。我做了一些搜索和this article seems to suggest you'd put the black palette within $primary-palette as well，只有一套主调色板。

来自帖子：

$colors: (
  blue: (
    0: hsl(198, 74%, 49%),
    1: hsl(200, 72%, 61%),
    2: hsl(200, 71%, 73%),
    [...]
  ),
  red: (
    0: hsl(3, 72%, 62%),
    1: hsl(4, 85%, 66%),
    2: hsl(4, 84%, 78%),
    [...]
  )
)


@function get-color($color, $value: 0) {
    @return map-get(map-get($colors, $color), $value);
}


.button--blue{
  color: get-color(blue, 0);
  background: get-color(blue, 4);
  &:hover{
    background: get-color(blue, 3);
  }
}

Sass函数调用多个Palette

1 个答案: