Augmented Usamimi

it { is_expected.to be_blog.written_by(izumin5210) }

Bootstrapのxxx-variant mixin

Bootstrapを拡張する

componentのvariationをふやす

.alert-successとか.text-info.btn-dangerみたいなの. 既存のやつ以外にもバリエーション増やしたいときに便利なmixinが用意されてたりする.

// assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color;
  }
  a#{$parent}:hover {
    color: darken($color, 10%);
  }
}
// assets/stylesheets/bootstrap/mixins/_background-variant.scss
@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color;
  }
  a#{$parent}:hover {
    background-color: darken($color, 10%);
  }
}

usage

こんなかんじ?

$pyonpyon: #97834e;

.bg-pyonpyon {
  @include bg-variant($pyonpyon);
}

.label-pyonpyon {
  @include label-variant($pyonpyon);
}

mixins

.alert-xxx

alert-variant($background, $border, $text-color)

.bg-xxx

bg-variant($parent, $color)

.btn-xxx

button-variant($color, $background, $border)

.label-xxx

label-variant($color)

.list-group-item-xxx

list-group-item-variant($state, $background, $color)

.panel-xxx

panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border)

.progress-bar-xxx

progress-bar-variant($color)

.text-xxx

text-emphasis-variant($parent, $color)