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;
}

コンパイル結果

という感じになります。

もっと詰めればスマートな書き方できるんでしょうが、まだまだ試しながら使ってる感じなので わかったらもっと詳しく書けたらなぁと思います