Question

我正在创建一个UI库，我想在其中提供主题所有UI组件的机制，例如按钮，卡，滑块和所有。我对变量和 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。每个组件都会有一个主题文件，其中包含该组件的主题mixin，在库级别，将有主题mixin，其中包含单个组件的所有mixin。由于角度材料已完成

_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

}

并且消费者将其称为

消费者theme.scss

@import "ui-library";

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

@include ui-theme($theme);

这些方法的优点和缺点是什么？还有其他办法吗？

Answer 1

如果你可以使用非常简单的CSS自定义属性（CSS变量）。您只需要在主体中添加一个类就可以立即更改所有变量。所以你只需要一个默认主题，然后只需要一些改变主题的类。

我在我的一个项目中有一个小例子，如果你点击＆＃34;反转主题＆＃34;它会将页面主题更改为反转：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贴图。当您拥有少量主题时，它更容易维护，您可以使用navigationItem.hidesSearchBarWhenScrolling = false循环

快速生成组件

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

@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

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

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

Answer 2

变量将成为您最初的最佳选择。

创建一个主题故事并不是你应该匆匆忙忙的事情，而是花时间将基本的，经过深思熟虑的变量整合到一组基础颜色中。之后，您可以使用lighten()，darken()以及SASS内置的其他工具扩展它们。

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

什么最适合用于主题中的变量或混合

2 个答案: