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

投稿者： くりりん
カテゴリー： マークアップ >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の書き方を試してみて下さい。