Mixinって何に使うやつ？
- 内部にCSSのプロパティ群を持つことができる。
- 共通のCSSを一元管理したい時に便利。
SCSSでかく
SCSS
//mixin設定@mixinhoge($argmentWidth:10px){//引数を渡さない場合は$argmentWidthは10px(デフォルト値)width:$argmentWidth;.add{@content;//mixin使用先でプロパティを記述したい場合に使用}}//mixinを使う対象.target1{@includehoge(5px){//@contentに代入display:inline-block;}height:auto;}.target2{@includehoge{display:inline;}height:0;}CSSにすると…
CSS
.target1{width:5px;height:auto;}.target1.add{display:inline-block;}.target2{width:10px;height:0;}.target2.add{display:inline;}こんな場所に使う
レスポンシブのメディアクエリに
SCSS
//mixin設定@mixinsp($breakPoint:768px){@mediascreenand(max-width:$breakPoint){@content;}}//mixinを使う対象.target{max-width:960px;@includesp(560px){max-width:100%;}}CSS
.target{max-width:960px;}@mediascreenand(max-width:560px){.target{max-width:100%;}}ブレークポイントを弄るのはあまりよくないかも…
引数のところは変数とかで共通化しよう。
最後に
みなさんMixinをどのように使っていますか…？