コーディング高速化！SCSSを最大限に活用するスニペットまとめ！

久しぶり！元気にしてたかい？

「”サス”まじ便利！ちょー早い！！」とか言いつつ、自分が使っていたのはSASSではなくSCSSだったと最近気づきました。

ですが呼びやすいので”サス”って呼んでます。

そんな”SCSS”で使える便利なスニペットを見つけたので、ご紹介します。

extend

scssでのextendは、定義したclassと同じスタイルを、適用させることができます。

よく使うスタイルなんかを登録しておくと便利ですね！

はみ出したテキストを非表示にして...を表示させる

最近良く使うようになったellipsis。

自分はよくスペルが分からなくなるので、”%ellip”みたいに簡略化して登録してます。

呼び出すときはこんな感じでいけます。

cssにコンパイルする際に、まとめて記述してくれるので、書くのも楽だし、CSSも短縮化できて一石二鳥ですね！

mixin

scssでのmixinは、phpやjsでいう関数のようなスタイルを適用させることができます。

よく使うスタイルだけど、一箇所だけ変わるときや、計算が必要なときなんかに便利ですね！

font-size を rem に対応させる

最近だとemや%ではなく、

root要素（html要素）のフォントサイズを継承させる “rem” のほうが階層が深くなってもフォントサイズが大きくなっていくことがないので便利だと使われはじめてますね！

ただ、旧ブラウザも対応させる場合だと “px” での指定もしなければいけないので、まとめて書けるように作りました。

呼び出すときはこんな感じです。

カッコ内にpx無しのサイズを記述すればOKです。

inline-blockを適応させる

inline-blockが便利すぎて、floatを使うことがほぼ無くなった自分にとってこれが便利過ぎたので紹介します。

もう今ではIE7対応している制作会社はあまり無いとは思いますが、ついでなので書いちゃってます。

呼び出すときに、カッコ内にvertical-alignの値を書くと適応されるようになってます。

自分はいつもセットで書くようにしているので、おすすめです。

変数

おまけです。自分は必須で使ってます。

レスポンシブ用のmediaquery

自分は基本タブレット無視で、スマホかPCを切り替えるようにしているので、これだけ定義してます。

使うときはこんな感じ。

SCSSだと、インデントして書けるので、楽だし分かりやすいですね！

イージング

css3のアニメーションを使う機会が増えてきましたが、bounceのイージングが無かったので作りました！

animation transition の両方に使えるので便利ですね！

import

作った変数などは、一つのファイルにまとめておくと使いまわせて便利！

まとめ

使っていくうちにどんどん高速化していくのを感じるSCSS。

使ってみるとなぜ今まで使っていなかったのか後悔するレベルで便利です…!!!!

大規模なチームなどだと、なかなか導入に踏み切れないし、みんなが覚えないといけないから大変・・・。

と、みんな言いますが、大規模だからこそ、SCSSを導入して、記述方法を統一化したり、全員のスキルアップを計れたりといいことづくしです。

修正のスピードも早くなるので、リーダーの方はぜひ検討してみてください！