CSSがもっと効率的に書ける!LESSの使用方法について。開発環境トレンドTIPSその他サービス紹介2016/11/04CSSがもっと効率的に書ける!LESSの使用方法について。Sellierが設計した動的スタイルシート言語です。LESSはCSSの拡張メタ言語で、LESSで書いたファイルをコンパイルするとCSSが生成されるという仕組みです。今回はLESSを使用するにあたり、基本的な導入方法と書き方の例を紹介します。まとめLESSのメリット・デメリットメリット頻繁に使うプロパティを設定できるベンダープレフィックス(先頭に付ける-moz-や-webkit-)を一々書かなくて済むデメリットコンパイルする必要があるCSS初心者向けではない(既にCSSに慣れ親しんでいる方には使い勝手が良い)LESSを動かすには?サーバー側(node.js、Rhino)でコンパイルしたCSSを読み込むコンパイルできるツールやサービスを使用し、変換してCSSとして読み込むJavaScriptを読み込み、クライアントサイドでCSSに変換する3つの方法を挙げましたが、3番目が主流となっています。こちらの方法でLESSを動かすようにしましょう。LESSの公式サイトhttp://less-ja.studiomohawk.com/にあるless.jsをダウンロードし、HTMLに埋め込みましょう。type="text/javascript"></script>これで、style.lessに書いたLESSが動くようになります。次にLESSの書き方を見てみましょう。rules)関数の利用(Mixins)演算(Operations)上記4つが挙げられます。この4つの書き方を一つずつLESSとCSSで比較して見てみましょう。#000000;}変数は「@~~」で表すことが出来ます。LESSにおける変数の定義は一度のみです。CSSを書いていると何回も同じコードを書くことがありますが、変更をかける時にいくつもの修正が入ることになります。いって一括置換も怖いですよね。変数を使用できるLESSを使う事で、このような不安点も解消できそうです。5px;}あらかじめ宣言しておいたプロパティを呼び出すことが出来ます。共通化しているコードやプレフィックスがつくようなコードをまとめておく事が出来るので、何回も同じコードを書くことが無く、コーディングの効率化になります。例にあるように変数で定義してあげればpxだけ違うようなものにも対応出来るのでとても便利です。55px;}入れ子にして書けることで、ID名やクラス名(上記の中では、クラス名.containerにあたります)を省略できるので、CSSファイルのボリュームを圧縮することができます。#666;}関数を使用して、計算式を入れることができます。文字サイズの比率を保ったまま、余白やmarginを変更するなどに使えます。その他コメントcssでの「/*~~~*/」のコメントの他に、行頭に「//」を付けたものでのコメントも可能です。まとめ初めはLESSの書き方を覚えるのが難しい部分もありますが、この書き方ができるようになる事で今まで長く書いていたCSSを短縮することが出来ます。ファイルの圧縮に繋がりますし、変更をする時などに重宝できます。LESSの書き方を試してみて下さい。コーディング業務のご依頼、ご相談の詳細についてはこちらから最後までお読みいただき、ありがとうございました。よろしければシェアしていただければ幸いです。前の記事へ関連記事よろしければこちらの記事もお読みください。:has擬似クラスをご紹介WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。ノウハウを学ぶことができます。