2015.6.12
2020.1.7

lessの利用

概要

よく分からずに手を出していなかったlessをちょっと試しに利用してみました。どうやらCSSを動的に拡張することができるようで、そこそこ簡単な作業で導入は可能みたいです。

詳細

lessで作成したコードはコンパイルすることで通常のスタイルシート(css)として利用できるようで、コンパイル自体はクライアントやサーバ、またはローカルの開発環境(IDE)で行えます。

クライアントの場合はブラウザのJavaScriptでlessからcssへの変換を行い、サーバの場合は事前にコンパイラをインストールしておくことで変換を行います。ローカルの開発環境(IDE)で変換する場合は、IDEがlessのコンパイルに対応していることが前提となりますが、コード保存時に変換されるように設定することが可能で、その方法はIDEによって異なります。

クライアント側でのコンパイルを試してみたところ、処理に少し時間がかかってしまい、スタイルが適用されたページが即座に表示されませんでした。

クライアントサイドやサーバサイドでコンパイルを行う場合、コンパイルしない時と比べてどうしてもレスポンスが落ちてしまうので、IDEでコード保存と同時にcssを出力するのが一番いいと思います。

lessの導入や何ができるかといったことについては他のサイトですでに情報があるので参考リンクの方を見てもらうとして、試してみた感想としては、使っていいのであれば使った方が便利、といった感じです。

ただ、最近は「less」よりも「sass(scss)」の方がよく利用されているように感じるので、そっちを利用した方がよさげです。

参考リンク

CSS】関連記事