PostCSS mixins　基礎とか

f:id:nnnde:20161118183121p:plain

こんばんわ、久々すぎてちょっと笑ってます。

最近、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;
}

コンパイル結果

という感じになります。

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

N. Design

webデザイナーやってます。お茶請け程度にどうぞ→@nnndmemo　（Twitter）

PostCSS mixins　基礎とか

基本編

応用編