SCSSで簡単に分割リストを作る便利な@extend

date_range 2017-06-08
folder
loyalty
visibility 322

実際５月病より６月病のほうが社会人にとっては辛いですよね。

梅雨だし、祝日無いし、眠いし。

 

さて今回は、私がよく使うSCSSのextendをご紹介したいと思います。

よくあるCSSで２分割、３分割、４分割が一瞬で作れるextendです。

目次

HTML

大事なのは、data-lengthと<li>の数を同じにすること。

この数に分割されます。

SCSS

%splitというextendを作ってどこでも使えるようにしています。

inline-blockを使うので、font-sizeを0にして、ぴったりのサイズに収まるようにしています。

分割したい親<ul>に@extend %split; を使って継承してあげるだけです。

まとめ

本当にSCSSをつかうようになってから、作業効率が格段に上がりましたね。

もうCSSには戻れないです。

初期導入は少し面倒ですが、ぜひ皆さんも使ってみてください。

person ナカーイの記事

expand_moreもっと見る

favorite 人気のタグ