SCSSのおすすめMIXIN

業務中で使っているおすすめのMIXINを紹介いたします。

https://github.com/Igosuki/compass-mixins

propressがバージョンアップしてCompassが別途必要になったので、探したらMIXINがありました。
使い方は_compass.scssを読み込んで、通常のCompassと同じように呼び出すだけ。
(Compassの使い方自体はGoogle翻訳にかけてください)

Family.scss

https://lukyvj.github.io/family.scss/

いつも英単語が覚えられない私でも使える!
疑似プロパティをつけたい部分に@includeをつけるといい感じになります。
前から3番目までクラスつけたいなーっていうときに便利です。
以下公式からのコピペですが、

ul li {
  background: red;
  @include first(3) {
    background: red
  }
}

というのがCSSに書き出すと下記のように出力されます。

ul li {
  background: red;
}

ul li:nth-child(-n + 3) {
  background: red;
}

https://github.com/saadeghi/browser-hack-sass-mixins

ブラウザハック系のmixinないかと探したところ見つけました。
他にも試したみたけど、一番対応しているブラウザの種類があるかな。

使い方はちょっと特殊で、行末に;をつけると書き出しが失敗します。
詳細は上記URLをGoogle翻訳をかけるとわかると思います。