CSSの親玉、LESSの書き方・使い方

Pocket

lessの使い方、書き方
CSSをものすごく高機能にしてくれるCSSメタ言語。これを利用することで変数やネスト、ミックスインといった便利な機能を使うことができ、CSSコーディングが非常に楽になります。

以前書いたSASSの使い方の記事では、SCSSとCompassの使いかたを紹介しました。SCSSももCSSメタ言語と呼ばれるもので、先ほど書いたような便利な機能を使うことができます。

今回はSCSSと同じCSSメタ言語である、LESSを使ってみます。こちらはBootstrap3などでも使用され、SCSSと同じくらいよく使われているメタ言語といえるでしょう。

細かい使い方はこちらの公式リファレンスサイトに載っていますので興味のあるかたはレッツトライ!

LESS.js

LESSのインストール方法と準備

LESSを使う前にインストールをしておく必要があります。ターミナルを開いて以下のように入力します。

install -g less

これで準備完了。

LESSはコンパイルして使う必要があるので、このままターミナルで設定しても良いのですが、SASSのコンパイルでも使っているCodeKitを使用しています。
lessの使い方、書き方、codekitの導入
このソフトを開いてプロジェクトフォルダをドラッグ&ドロップするだけで、lessファイルを上書きするごとに自動的にcssにコンパイルしてくれるようになります。

もちろんどんなエディターを使っていても機能するのでcodekitはおすすめ。お試し期間後は有料となりますが、$25なので仕事でコーディングする方は購入しても損はないでしょう。

フォルダをドラッグすると、以下の画像のように対応したCSSファイルと勝手につないでくれます。めちゃくちゃ便利!
lessの使い方、書き方、codekitの導2

LESSの書き方・使い方

LESSはSASS(SCSS)と似たような書き方で使うことができますが、微妙に違うところがあるので間違えないように注意が必要です。

まず、当然ですが、ファイルの拡張子が異なります。SASS(SCSS)の場合は.scssでしたが、LESSの場合は.lessとなります。

LESSの変数の書き方

変数(Variables)は値をセットしておくことで、いろんな場所でセットした値を使える機能。よく使うのはカラーの設定やフォント周りの設定などです。SASSでは$を使用しましたが、LESSでは@になります。こんな感じ。

@nice-blue: #5B83AD;

#header {
  color: @nice-blue;
}

//コンパイル後
#header {
  color: #5B83AD;
}

Mixinsの使い方

Mixinsは複数行の変数のようなもの。box-shadowやborder-radiusなどの設定でよく使われます。同じスタイルを使い回すときに大変便利な機能。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

//コンパイル後
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Mixinsでは以下のようにパラメータの設定も可能です。

//Mixinsの設定
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

LESSのネスト(入れ子構造)の使い方

ネストはcssのセレクターを入れ子にすることで、同じセレクターを何度も書くという手間を省いてくれる機能。また、見た目にも直感的で分かりやすくなるので、最も重宝する機能の1つですね。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

//コンパイル後
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

ネストの下記かたの注意点は、&の使いどころ。例えば:hoverや:last-childなどのようなセレクターにくっついてくるもの、.title.redなどのような〇〇且つ〇〇という設定のものには&を使ってつなげます。

a {
  color: black;
  &:hover {
    color:  red;
  }
}

//コンパイル後
a {
  color: black;
}
a:hover {
 color: black;
}

NamespacesとAccessorsの使い方

CSSを書いていてよくあるのは、同じスタイルの使い回し。CSSの場合は同じものがあったら、コピーするか使い回し元のセレクターに追加したりしていました。LESSでは使い回したいところがあれば、簡単に引っ張ってくることができます。

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

//一部のスタイルを使い回したいときに使用
#header a {
  color: orange;
  #bundle > .button;
}

Extendの使い方

先ほどの機能と似たようなものにExtendがあります。こちらも使い回したいものがある場合に便利な機能。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

//コンパイル後
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

以下のようにネストされたセレクターを選択することも可能。

.bucket {
  tr { 
    color: blue;
  }
}
.some-class:extend(.bucket tr) {}

//コンパイル後
.bucket tr,
.some-class {
  color: blue;
}

ここまでざっくりと基本的な機能に付いて紹介しました。これだけでも十分つかえるようになりますが、まだまだすごい機能がたくさんあります。関数のような使い方ができたり、セレクタのマッチングができたり、ループやマージといった機能もあります。

が、慣れるまでは変数やネスト、Mixinsだけでも十分でしょう。まだ使っていないかたは是非使ってみて下さい。