みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

先週書きそびれてしまいました、皆さんすいません！

 

さて、今週のお題ですが、自分の時事ネタです！LESSを案件で触りました！

僕はどちらかというとSass派です。何よりもの理由がSassのショートハンドが便利だからです。
例えば、{}で閉じたり、; で閉じたりするのが正直面倒と感じているからです。

また、mixinの呼び出しなどが + だけで呼び出せるなど、便利な記法に惚れています。
ちなみに以前比べてみたところ、素でCSSを書くのとでは1/3くらい短くできていました。
書き方次第ではこれくらい楽にできるのでオススメです。いえ、もっと書かなくても済むかもしれません！？

LESS

さて、LESSのメリットですがクライアント・サーバーサイド両方でのコンパイルができることです。
サーバーサイドはさておき、クライアントサイドでのコンパイルは非常にのろくて本番では使用できません。開発用ですね。

ですが、node.jsやGulpでSassを自動コンパイルしてブラウザを自動リロードさせている身としては、lessjsの魅力はあまり感じられませんでした・・・。

しかし、はじめて記述したばかりなのでまだ未熟ものなのですが、この書き方は非常に良いなと思いました。
皆さんも是非真似してみてください！

 

.c-gnav {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
margin-bottom: 0;
padding-left: 0;
&__mega {
// 一時的に
display: none;
}
&__item {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 0;

 

&で親の値を引っ張ってきています。そしてそのまま結合しています。

つまり？MindeBEMdingで書く際には非常に便利ですね。
構造が明確になるため、おかしい記述をすることもなくなるし、何より見やすいです。

less微妙かなぁ・・・って正直思っていたんですが、こんな使い方を知ってびっくりしました。

この書き方は実はSassでもできるのでは・・・今度検証してみたいと思います。

それではまた来週お会いしましょう！