mixinが見つからないとおもったら

cssでflexを使っていたら
「flexは@includeを使ってください」

と言われたので、何のことかとおもったら
Sassというcss便利ツールのことっぽい
簡単に言うと、
@mixin
でよく使うcssのプロパティを定義
@includeで呼び出す。

。。。
なのですが

「どこ探してもないやん！」

聞いたら
「gemにあるよ」
とのこと

。。。gemにある。。？
ありました。

ちなみに似たようなもので
compass(http://compass-style.org/)　もある...

cssとかscssについては「えいやっ」で割と書いていたので、ちょっと調べてみる。
（今日もflexboxで苦闘していた。。。つらげ）

Sassとは

結論：cssをいけてるように書ける
- どういけてるのか？
１）セレクタの入れ子ができる
２）変数が使える（$base-color:#FFFFF みたいな）
３）セレクタの継承ができる（@extend使う）
４）Mixinが使える

１）２）はまぁなるほど。みたいな感じです。
３）４）が若干怪しい。

３）の継承は特定のセレクタを「そのまま」使える。なので

p1 {color: red;}
p2 { @extend .p1;
border: solid;
}

=>

p1 {color: red;}
p2 { color: red;
border: solid;
}

こうなりますね。

では4)のmixinはどないやと。これはいくつかパターンがあります。

引数なし
@mixin round-btn{
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    background-color: #c9c9c9;
}
引数あり
@mixin auto-color($color){
    color:$color;
}
デフォルト引数つき
@mixin auto-color($color: #FFFFFF){
    color:$color;
}
.hoge {
 @include auto-color(#EEEEEE)
}
＝＞展開後
@mixin auto-color($color: #FFFFFF){
    color:$color;
}
.hoge {
    color:#EEEEEE;
}

引数付きが便利ですねぇ。

では本題に。
というかそもそもcompassとburbonってどう違うんや。
＝＞多分大体一緒。使えるmixinが違ったりするっぽい。

なんで好みで〜という記事が多かった。

うちのプロジェクトはbourbonさんを使ってる。
@import　で読み込んで、固有のmixinを使ってるんですね。
今回使ってたのが

@include display(flex);
@include flex-wrap(wrap);

こういう感じやったので、
http://bourbon.io/docs/#flexbox

ここら辺の内容を使ってる。
https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/css3/_flex-box.scss

主にベンダープレフィックスとかを記載してるんですね。display:flexとかはもちろんのこと

勉強になりました。