# LESSでCSSを書いてみた

- リンク: https://torounit.com/blog/less%e3%81%a7css%e3%82%92%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f/
- 公開日: 2011-09-01T11:54:25+09:00
- 作成者: Toro\_Unit

CSSのメンテナンス性の悪さは広く知られて居るとは思いますが、その解決策として、SASS
とかSCSSなどがあります。今回はその仲間のLESSの導入記録です。

公式サイト:[LESS « The Dynamic Stylesheet language](http://lesscss.org/)

LESSというのは、CSSのメタ言語で、コレをコンパイルすると、CSSが出力されます。
 LESS
を使うとこんなことが出来ます。

# LESSを使うと出来ること

 * ルールのネスト
 * 変数
 * Mixin
 * 四則演算などちょっとした関数

また、普通のCSSの記法も使えますので、リセット用のCSS等そのままコピペも可能です。

# ルールのネスト（階層化）

CSSのルールをネスト出来ます。いちいちセレクタをコピペしなくていいし、コードの視認
性や、構造が非常にわかりやすくなります。親のセレクタを再利用するには、”&”を用います。

  less [css]
 #header { h1 { font-size: 26px; font-weight: bold; } p { font-size:
12px; a { text-decoration: none; &:hover { border-width: 1px } } } } [/css]

  css [css]
 #header h1 { font-size: 26px; font-weight: bold; } #header p { font-
size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-
width: 1px; }

[/css]

# 変数

css内で変数が使えます。色などの一括管理などにはかなり便利です。

  less [css]
 @color: #4D926F;

#header {
 color: @color; } h2 { color: @color; } [/css]

  css [css]
 #header { color: #4D926F; } h2 { color: #4D926F; } [/css]

# Mixin

Mixinっていうと難しく聞こえますが、他のプロパティ内で、読み込んで使えるプロパティ
のまとまりを作る事ができるということです。

[css]
 .hoge(){ color: #FFF; background-color: #000; } [/css] でMixin用のプロパティ
を作成できます。このプロパティ自体はCSSに出力されません。また変数なども入れること
も出来ます。

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

#header {
 .rounded-corners; } #footer { .rounded-corners(10px); } [/css]

 css [css]
 #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-
radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-
border-radius: 10px; } [/css]

clearfixとかをMixinすると便利だったりします。

# ちょっとした計算など

四則演算や、色を10%明るくするだとか、地味に便利な関数が用意されています。

  less [css]
 @the-border: 1px; @base-color: #111; @red: #842210;

#header {
 color: @base-color * 3; border-left: @the-border; border-right: @the-
border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@
red, 10%); } [/css]

 css [css]
 #header { color: #333; border-left: 1px; border-right: 2px; } #footer{
color: #114411; border-color: #7d2717; } [/css]

# 他のLESSファイルのインポート

[css]
 @import "reset.less"; @import "reset"; [/css] とすることで、reset.lessが展開
されます。lessファイルの場合、拡張子を省いても大丈夫です。

結構ざっくりとした説明ですので、詳細は:[lesscss.org](http://lesscss.org/)の方を参照
して下さい。英語ですがコードを眺めていればだいたいつかめると思います。

# 導入について

 公式サイトでは、less.jsで、ブラウザでコンパイルをさせています。
 [html] <link rel
="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type
="text/javascript"></script> [/html] こんな感じです。ソースのhead内にcssを展開し
ます。 簡単にできますが、かなりブラウザに負荷がかかるので、おススメできません。制作
中等限定で使用したほうが良いかと思います。

なので、Macの場合、公式アプリのless.appを活用しましょう。コレは、登録されたlessファイル
が更新されたときに自動的にcssファイルを作成してくれるソフトです。特定のディレクトリ
内lessファイルを検索もしてくれるので、開発用のディレクトリを指定しておくとかなり
簡単です。自分の場合はコレをログイン時に起動するようにしています。

windowsの場合は[mach3さん](http://blog.mach3.jp)がlessniumというアプリケーション
を作成していますので、それが便利だと思います。>>[TitaniumデスクトップでLESS.jsのフロントエンドをこさえてみた](http://blog.mach3.jp/2011/05/lessnium.html)

なお、Lessniumには、[Titanium](http://www.appcelerator.com/)が必須です。

また、Node.jsなどでも動作しますので、そちらは公式サイトを参照して下さい。

LESSを使うと、CSSの管理等が、非常に楽になりますし、効率良くCSSを書いていく事ができ
ます。SASSとかSCSSとか多機能なものもありますが、LESSは学習コストが低いのとコンパイル
の手間が少ないので、試してみてはどうでしょうか。

[LESS « The Dynamic Stylesheet language](http://lesscss.org/)