Help us understand the problem. What is going on with this article?

bootstrap-sassに色関係のクラスを追加する

More than 3 years have passed since last update.

初投稿です。

最近ようやくBootstrap3に触れることになったのですが、
.btn-successとか.alert-dangerとかの色関係のクラスって使いづらくないですか?
怒られるかもしれないけど.btn-redとか使いたい。簡単に増やしたい。

なので作りました。.◯◯◯-redと.◯◯◯-blueを増やす例です。
SassのMap機能を利用するのでSass3.3以上が必要です。

/assets/stylesheets/bootstrap/内に_custom-theme.scssを作り、
内容を下記に。

bootstrap/_custom-theme.scss
@import "mixins";

//== Custom Colors
//
//

//redの基本色
$brand-red:             #cc3333;
$btn-red-color:         #fff !default;
$state-red-text:        #ee0000 !default;
$state-red-bg:          #ffdddd !default;

//blueの基本色
$brand-blue:            #3333cc;
$btn-blue-color:        #fff !default;
$state-blue-text:       #0000ee !default;
$state-blue-bg:         #ddddff !default;

//追加する色のセットを連想配列で用意する
$customcolors: (
  red:(
    brand:              $brand-red,
    btn-color:          $btn-red-color,
    btn-bg:             $brand-red,
    btn-border:         darken($brand-red, 5%),
    state-text:         $state-red-text,
    state-bg:           $state-red-bg,
    state-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    label-bg:           $brand-red,
    alert-bg:           $state-red-bg,
    alert-text:         $state-red-text,
    alert-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    progress-bar-bg:    $brand-red,
    panel-text:         $state-red-text,
    panel-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    panel-heading-bg:   $state-red-bg
  ),
  blue:(
    brand:              $brand-blue,
    btn-color:          $btn-blue-color,
    btn-bg:             $brand-blue,
    btn-border:         darken($brand-blue, 5%),
    state-text:         $state-blue-text,
    state-bg:           $state-blue-bg,
    state-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    label-bg:           $brand-blue,
    alert-bg:           $state-blue-bg,
    alert-text:         $state-blue-text,
    alert-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    progress-bar-bg:    $brand-blue,
    panel-text:         $state-blue-text,
    panel-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    panel-heading-bg:   $state-blue-bg
  )
);


//== Components
//
//
//追加したいCSSコンポーネントを選択(trueで生成)
$components: (
  alert:        true,
  btn:          true,
  form:         true,
  label:        true,
  list-group:   true,
  panel:        true,
  progress-bar: true,
  table:        true,
  helper-class: true
);

//一応mixin化
@mixin theme-gen() {
  @each $color in $customcolors{
    //alert
    @if map-get($components, alert) == true {
      .alert-#{$color} {
        @include alert-variant(map-get(map-get($customcolors, #{$color}), alert-bg), map-get(map-get($customcolors, #{$color}), alert-border),map-get(map-get($customcolors, #{$color}), alert-text));
      }
    }
    //button
    @if map-get($components, btn) == true {
      .btn-#{$color} {
        @include button-variant(map-get(map-get($customcolors, #{$color}), btn-color), map-get(map-get($customcolors, #{$color}), btn-bg), map-get(map-get($customcolors, #{$color}), btn-border));
      }
    }
    //form
    @if map-get($components, form) == true {
      .has-#{$color} {
       @include form-control-validation(map-get(map-get($customcolors, #{$color}), state-text), map-get(map-get($customcolors, #{$color}), state-text), map-get(map-get($customcolors, #{$color}), state-bg));
      }
    }
    //label
    @if map-get($components, label) == true {
      .label-#{$color} {
        @include label-variant(map-get(map-get($customcolors, #{$color}), label-bg));
      }
    }
    //list-group
    @if map-get($components, list-group) == true {
      @include list-group-item-variant(#{$color}, map-get(map-get($customcolors, #{$color}), state-bg), map-get(map-get($customcolors, #{$color}), state-text));
    }
    //panel
    @if map-get($components, panel) == true {
      .panel-#{$color} {
        @include panel-variant(map-get(map-get($customcolors, #{$color}), panel-border), map-get(map-get($customcolors, #{$color}), panel-text), map-get(map-get($customcolors, #{$color}), panel-heading-bg), map-get(map-get($customcolors, #{$color}), panel-border));
      }
    }
    //progress-bar
    @if map-get($components, progress-bar) == true {
      .progress-bar-#{$color} {
        @include progress-bar-variant(map-get(map-get($customcolors, #{$color}), progress-bar-bg));
      }
    }
    //table
    @if map-get($components, table) == true {
      @include table-row-variant(#{$color}, map-get(map-get($customcolors, #{$color}), state-bg));
    }
    //helper-class
    @if map-get($components, helper-class) == true {
      @include text-emphasis-variant('.text-#{$color}', map-get(map-get($customcolors, #{$color}), state-text));
      @include bg-variant('.bg-#{$color}', map-get(map-get($customcolors, #{$color}), state-bg));
    }
  }
}

//生成
@include theme-gen();

あとは_bootstrap.scssなどに@include '_custom-theme'で読み込ませる。

こんな感じに.◯◯◯-redと.◯◯◯-blueが使えるようになります。
sample.png

もっといい方法ないすかね

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away