混合并转换原始 Bootstrap 颜色以获得已知颜色

Question

也许这个问题很荒谬，但我目前正在 Twitter Bootstrap 中实施一个项目，我会保留框架的原始颜色。所以，如果我想添加另一种颜色，我会利用 Less 的强大功能及其函数对 Bootstrap 的原始颜色进行混合和转换，以获得我需要的颜色。

这是 Bootstrap 的原始颜色：

@gray-base:         #000;
@gray-darker:       lighten(@gray-base, 13.5%); // #222
@gray-dark:         lighten(@gray-base, 20%);   // #333
@gray:              lighten(@gray-base, 33.5%); // #555
@gray-light:        lighten(@gray-base, 46.7%); // #777
@gray-lighter:      lighten(@gray-base, 93.5%); // #eee

@brand-primary:     #428bca;
@brand-success:     #5cb85c;
@brand-info:        #5bc0de;
@brand-warning:     #f0ad4e;
@brand-danger:      #d9534f;

假设我想获取颜色#4FA293。为此，我使用了 Less 函数 mix()，如下所示：

mix(#428bca, #5cb85c, 50%)

其中#428bca 是@brand-primary 颜色，#5cb85c 是@brand-success 颜色。

这只是理解我的目标的一个例子。问题是：

是否有工具可以混合、转换和转换 Bootstrap 颜色以获得先验已知颜色？

有数学关系可以实现吗？

我想我可以得到从5个Bootrasp颜色和less函数开始的所有颜色。

Answer 1

我需要 Bootstrap 的一组颜色。现在，我怎样才能添加新颜色 套装？我可以从 Bootstrap 集中生成新颜色吗？如果没有，可以 我使用悬停、按钮、导航等添加自定义颜色？

定义一个新的添加颜色很容易：@brand-custom: #4FA293。要在组件上应用该颜色，您应该使用 Bootstrap mixins（另请阅读：http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/）。

示例按钮：

@brand-custom: #4FA293;
.btn-custom {
  .button-variant(#fff; @brand-custom; darken(@brand-custom, 5%));
}

您可以在 bootstrap.less 文件的末尾写下前面的代码。重新编译后就可以使用了：

<button class="btn btn-custom">Custom button</button>

按钮现在应该如下所示：

您也可以这样做来自定义您的面板：

.panel-custom {
  .panel-variant(darken(spin(@brand-custom, -10), 7%); #fff;  @brand-custom; darken(spin(@brand-custom, -10), 7%););
}

现在是以下面板：

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

遗嘱如下所示：

在检查 Bootstrap 的 variables.less 文件时，您应该注意到原始面板颜色并非直接源自品牌颜色 (one could wonder why not)。

成功面板的 CSS 代码已使用以下 mixin 创建：

.panel-success {
  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}

变量定义如下：

@state-success-text:          #3c763d;
@state-success-bg:            #dff0d8;
@state-success-border:        darken(spin(@state-success-bg, -10), 5%);
@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

因此更改@brand-success 不会更改.panel-success CSS 类。

您应该重复上述步骤或使用@brand-custom 颜色设置的每个组件。