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
.btn-xxx
button-variant($color, $background, $border)
.label-xxx
.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
.text-xxx
text-emphasis-variant($parent, $color)
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: Kindle版
- この商品を含むブログを見る
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る