什么最适合用于 sass 中的主题变量或 mixins答案

【问题标题】：What is best fit to use for theming variables or mixins in sass什么最适合用于 sass 中的主题变量或 mixins
【发布时间】：2018-03-07 09:31:15
【问题描述】：

我正在创建一个 UI 库，我想在其中提供一种机制来主题化所有 UI 组件，例如 button、cards、slider和所有。我对 variables 和 mixins 感到困惑。

一种方法是提供号码。用户可以更新的变量和基于该变量的组件类将被派生。 materialzecss 库中使用了相同的概念。并且用户会使用喜欢

//variables that are used to create component css classes
$primary : "blue";
$btn-primary :"green";
//then include the ui library
@import "_ui-variables";
@import "ui-library";

_ui-variables.scss

$primary : "red" !default;
$btn-primary: $primary !default;
// and other variables

_btn.scss 会像

.btn {
  // other rule sets
  color:$btn-primary;
}

其他方式可能是使用mixins。每个组件都有一个主题文件，其中包含该组件的主题混合，在库级别，将有一个主题混合，其中包含单个组件的所有混合。正如 angular-material 所做的那样

_btn.scss

@import "_btn-theme.scss";
.btn {
// some rules
}

_btn-theme.scss

@mixin btn-theme($theme) {
  // if user has added the btn-primary then use btn-primary otherwise primary
  @if map-has-key($theme,btn-primary) {
     $btn-primary : map-get($theme,primary);
  } @else {
      $btn-primary : map-get($theme,primary);
  }
  .btn {
     color:$btn-primary;
  }
}

和 ui-library.scss

@import "_btn.scss";
@import "_card.scss";

@mixin ui-theme($theme) {
  @include btn-theme($theme);
  @include card-theme($theme); // include all component theme

}

消费者会将其称为

consumer-theme.scss

@import "ui-library";

$theme :(primary:"blue",accent:"yellow");

@include ui-theme($theme);

这些方法的优缺点是什么？有没有其他方法可以做到这一点？

【问题讨论】：

标签： css design-patterns sass mixins

【解决方案1】：

如果您可以使用 CSS 自定义属性（CSS 变量），那将非常容易。您只需要向主体添加一个类即可一次更改所有变量。所以你只需要一个默认主题，然后只需要一些类来改变你的主题。

我的一个项目中有一个小例子，如果您点击“反转主题”，它会将页面主题更改为反转：https://vinceumo.github.io/atomic-bulldog-style-guide-demo/styleguide/section-organisms.html#kssref-organisms-accessibility-settings

CSS 自定义属性的问题是不是每个兄弟都支持它：/ https://caniuse.com/#feat=css-variables

否则，我强烈建议使用 sass 地图。当你的主题很少时更容易维护，你可以使用@each循环快速生成你的组件

例如，如果要生成背景颜色类：

$color-themes: (
  primary:
    (
      base: #4c5c8c,
      dark: darken(#4c5c8c, 15%),
      light: lighten(#4c5c8c, 15%),
      transparent: transparentize(#4c5c8c, 0.5),
      contrast: #ffffff
    ),
  secondary:
    (
      base: #212529,
      dark: darken(#212529, 15%),
      light: lighten(#212529, 15%),
      transparent: transparentize(#212529, 0.5),
      contrast: #ffffff
    )
}

@each $name, $theme in $color-themes {
  .has-bg-#{$name} {
    background-color: map-get($name, base);
    color: map-get($name, contrast);
  }
}

所以在这里我们将获得两个新类.has-bg-primary，.has-bg-secondary

如果您向地图添加新条目，它将自动生成新类:)

我使用带有 Sass 变量的 CSS 自定义属性（可以禁用此属性）创建了一个 Scss 样板。它针对主题创建进行了优化。大多数组件都链接到变量（使用映射）。看看https://github.com/vinceumo/atomic-bulldog

【讨论】：

【解决方案2】：

变量将是您最初的最佳选择。

创建主题故事不是您应该匆忙完成的事情，而是花时间为一组基本颜色整合可靠的、经过深思熟虑的变量。之后，您可以使用 lighten()、darken() 和其他内置在 SASS 中的工具来扩展它们。

然后，使用该基本变量集来建立组件特定变量，以根据需要扩展主题故事。

【讨论】：