LESS

LESSはCSSをより使いやすくするための言語。
Leaner CSSの略。leanは「無駄のない」「効率的な」の意味。

特徴

変数を扱うことができる
入れ子構造で、宣言を簡単に書ける
スタイルをクラスで一括に格納しておくことができる

使い方

呼び出し方

大抵のブラウザは、Lessを直接翻訳することとができないため、サーバーサイドでCSSに変換する必要がある。

クライアントサイド変換方式

速度はサーバーサイド変換方式よりも劣るが、非常に手軽。
Lessのファイルを読み込んだ後に、less.jsを読み込む必要がある。
less.jsは下記からダウンロード可。
(Lessはjavascriptで組まれている)

http://lesscss.org/

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

また、chromeの起動オプションに書きを追加する必要がある。

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

URLの最後に#!watchを追加することで、lessファイルの更新を、リアルタイムに反映することができる。

サーバーサイド変換方式

Lessコンパイラは、Node.jsのパッケージマネージャnpmを用いて下記のようにインストールする。(windowsならpower shellで実行可能)

▶ コンパイラとは
簡単に言うと、翻訳者。
ソースコードを、コンピューターが実行可能なオブジェクトコード（形式）に変換する作業を行うためのプログラム。
その過程自体をコンパイルという。
Lessにおいて言うなら、CSSに変換する作業。

$ npm install -g less

Lessコンパイラ(lessc)を用いて、Lessファイルをコンパイルする。

下記の例は、style.lessファイルをstyle.cssファイルにコンパイルしている。

$ lessc style.less style.css

--clean-cssオプションは、縮小（minified）されたcssファイルを作成することができる。
プラグインがインストールされていない場合は、npmでless-plugin-clean-cssプラグインをインストールする。

$ lessc --clean-css styles.less styles.min.css

コンパイルすると//を用いたコメントは削除される。

変数

lessでは変数を扱うことができる。

ex).

@mycolor:blue;

h1{
 fontcolor:@mycolor;
}

また、変数名を"",''といった形で使用する場合、セレクタやプロパティ名を変数定義した場合には、
@{変数名}といった形で使用する。

@headers:h1,h2,h3,h4;
@property:color;
@{headers}{
  @{property:block;}
}

また、画像データなどを挿入するために、urlを挿入する際に、ファイルの場所が変わっても対応できるように、変数を使って以下のような書き方もできる。

@dir:../img;

h1{
background:url("@{dir}/big.png");
}

ミックスイン

ミックスインは、継承用に利用されるクラス定義。

.mybox{
border:1px solid #999;
}
h4{
color: #366;
.mybox;
}

引数を受け取るミックスインも定義可

.mybox(@width; @color){
 border:@width solid @color;
}
h1{
 .mybox(1px; #666);
}

引数にマッチする条件によって適用するミックスインを変更できる機能もある。

ネストルール

lessの良さとして、階層的に書くことができるという良さがある。

例えば、

<div class="A1">
<h1>未来電子</h1>
<p>インターン</p>
</div>

という内容のhtmlがあったとすると、これに対して、

.A1{width:500px;
    margin: 0 auto;
h1{
  font-size:@{h3-size};
p{
  font-size:@{a-size};
  backgroud:url("@{dir}/test.png");
}
}
}

のような指定の仕方ができる。

第二回 Programing夏期講座 LESS