PostCSS mixins 基礎とか
こんばんわ、久々すぎてちょっと笑ってます。
最近、PostCSSを使うようになったのですが、コードを書く際に、mixinでつまづきました。 PostCSS mixinsのあまり頭の回転がよくない私がgitのhowto読んでもわからなかったので、 色々試行錯誤しながらという感じですが、自分のmemoも含めてちょっと書いてきます。
PostCSS github.com
実装方法などはこちらを参考にしてください
qiita.com
まず、こちらが入ってるのが前提です github.com
基本編
まず、mixinなどまとめてるcssにmixinの記述をします
@define-mixin mixin-01 { margin: 0 auto 18px; padding:6px; border: 1px solid #000 }
mixin-01
が呼び出しのコードになります
そして、その mixin-01
が複数使いたい場合、以下のコードを書く
.sample01 { @mixin mixin-01; }
sassよりシンプルに呼び出しが可能。
下記コンパイル結果
.sample01 { margin: 0 auto 18px; padding: 6px; border: 1px solid #000; }
最初、呼び出し方がわからなくて大分苦戦してましたが、わかりやすいですね。
応用編
例えば、基本は一緒ですが、色だけ違うとかって時に使えるもの。
@define-mixin mixin-02 $margin: 0 auto 18px, $border-color: 000, $background: test { margin: $margin; padding:6px; border: 1px solid #$border-color; background: url(../images/$(background).png no-repeat; }
@define-mixin の$要素名: デフォルト値
の部分がポイントです。
此処に入れた、要素名をcssに適応させます。
基本の記述は一緒だけど変更させたい部分に、この$要素名: デフォルト値
を当てます。
色の数値や、背景の一部名前の変更など可能です
(メニューやタイトルなどに使えそうですね)
.sample02 { @mixin mixin-02; }
特に変更などしなくても、この記述でもそのまま使えます
.sample02 { margin: 0 auto 18px; padding: 6px; border: 1px solid #000; background: url(../images/test.png) no-repeat; }
コンパイル結果になります
.sample03 { @mixin mixin-02 30px, f00, test_smart ; }
そして数値を変えたい場合、 mixin名の数値の後ろに、変更したい数値を当てます。
.sample03 { margin: 30px; padding: 6px; border: 1px solid #f00; background: url(../images/test_smart.png) no-repeat; }
コンパイル結果
という感じになります。
もっと詰めればスマートな書き方できるんでしょうが、まだまだ試しながら使ってる感じなので わかったらもっと詳しく書けたらなぁと思います