WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

くりりん

2016/11/04

CSSがもっと効率的に書ける!LESSの使用方法について。

投稿者: くりりん
カテゴリー: マークアップ >CSS

みなさん、LESSという言葉を聞いたことはありますか?
LESS(Leaner CSS)は、Alexis Sellierが設計した動的スタイルシート言語です。
LESSはCSSの拡張メタ言語で、LESSで書いたファイルをコンパイルするとCSSが生成されるという仕組みです。
今回はLESSを使用するにあたり、基本的な導入方法と書き方の例を紹介します。

LESSのメリット・デメリット

メリット

  • 頻繁に使うプロパティを設定できる
  • ベンダープレフィックス(先頭に付ける-moz-や-webkit-)を一々書かなくて済む

デメリット

  • コンパイルする必要がある
  • CSS初心者向けではない(既にCSSに慣れ親しんでいる方には使い勝手が良い)

LESSを動かすには?

  1. サーバー側(node.js、Rhino)でコンパイルしたCSSを読み込む
  2. コンパイルできるツールやサービスを使用し、変換してCSSとして読み込む
  3. JavaScriptを読み込み、クライアントサイドでCSSに変換する

3つの方法を挙げましたが、3番目が主流となっています。こちらの方法でLESSを動かすようにしましょう。

まずは、LESSの公式サイトhttp://less-ja.studiomohawk.com/にあるless.jsをダウンロードし、HTMLに埋め込みましょう。

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>

これで、style.lessに書いたLESSが動くようになります。では次にLESSの書き方を見てみましょう。

LESSでできる事

  • 変数の利用が可能(Variables)
  • セレクタの入れ子が可能(Nested rules)
  • 関数の利用(Mixins)
  • 演算(Operations)

上記4つが挙げられます。では、この4つの書き方を一つずつLESSとCSSで比較して見てみましょう。

変数を使用した書き方

LEES:

@color: #000000;

.content{
 color: @color;
}

#wrppaer{
 backgeround-color: @color;
}

CSS:

.content{
 color: #000000;
}

#wrppaer{
 backgeround-color: #000000;
}

変数は「@~~」で表すことが出来ます。LESSにおける変数の定義は一度のみです。
CSSを書いていると何回も同じコードを書くことがありますが、変更をかける時にいくつもの修正が入ることになります。
かといって一括置換も怖いですよね。変数を使用できるLESSを使う事で、このような不安点も解消できそうです。

Mixin(関数)の書き方

LESS:

.rounded-corners(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.container {
    .rounded-corners;
}

CSS:

.rounded-corners(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.container {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

あらかじめ宣言しておいたプロパティを呼び出すことが出来ます。
共通化しているコードやプレフィックスがつくようなコードをまとめておく事が出来るので、何回も同じコードを書くことが無く、コーディングの効率化になります。
また例にあるように変数で定義してあげればpxだけ違うようなものにも対応出来るのでとても便利です。

ネスト(入れ子構造)の書き方

LESS:

.container {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    
    .inner {
        margin: 0 auto;
        padding: 5px;
    }
    .logo {
        float: left;
        height: 55px;
    }
}

CSS:

.container {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}

.container .inner {
    margin: 0 auto;
    padding: 5px;
}

.container .logo {
    float: left;
    height: 55px;
}

入れ子にして書けることで、ID名やクラス名(上記の中では、クラス名.containerにあたります)を省略できるので、CSSファイルのボリュームを圧縮することができます。

計算式の書き方

@color: #111;
@pad: 10px;

.container {
    padding: @pad + 20;
}

header {
    color: @color * 6;
}

CSS:

.container {
    padding: 30px;
}

header {
    color: #666;
}

関数を使用して、計算式を入れることができます。
文字サイズの比率を保ったまま、余白やmarginを変更するなどに使えます。

その他

コメント
cssでの「/*~~~*/」のコメントの他に、行頭に「//」を付けたものでのコメントも可能です。

まとめ

初めはLESSの書き方を覚えるのが難しい部分もありますが、この書き方ができるようになる事で今まで長く書いていたCSSを短縮することが出来ます。
ファイルの圧縮に繋がりますし、変更をする時などに重宝できます。是非、LESSの書き方を試してみて下さい。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ