LESS初心者向けのナニカ

/web/html-css

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳）

さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。

要するにhoge.lessとかファイル作って、変数とか織り交ぜて書いておくと...

// ベンダープレフィックスとか書いておく
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}

// 呼び出すと1行で終了
#header {
    .rounded-corners;
}

// 値も適宜に変更可能
#footer {
    .rounded-corners(10px);
}

このファイルを解析して、以下のようなCSSファイルに変換（コンパイル）してくれます。

#header {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    }
#footer {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

変数を示す記号に@が使われている辺り、@mediaとか@importみたいな@ルールみたいで紛らわしいなとか多少は思ったりしますが、LESSファイルの記述(「LESS記法」って言って良いのかな？)そのものは慣れ親しんだCSSとほとんど同じですし、変数とか関数とかインクルードとか簡単な計算機能とか使ってすっきりと書くことができる。なんだったら、そのまま普通にCSS書いてても良いし。

さて、SassはRubyで書かれていますが、LESSの本体はJavaScriptで作られています。LESS記法？で書かれたファイルをJavaScriptで解析し、CSSファイルとして変換するわけです。なので、実はターミナル（黒い画面）を経由しなくても動作します。

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

HTMLのheadタグでless.jsを読み込めば、あとは.lessファイルにCSSをゴリゴリ書くだけで、ローカルでブラウザ観ながら開発できるわけです。これはデカイ。便利！ もちろんコンパイルもできるので、開発が終われば...

$ lessc styles.less > styles.css

...のように変換してやれば良いわけです。とりあえず使ってみましょ！

導入の流れ

...とまあ、ここまで偉そうに解説しましたけど、俺ってLESS使ったことないんですよね。なのでインストールから始めましょうか。まずは公式サイトからless.jsをダウンロードしましょう。

んで、<head>タグ内に以下を記述。

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

rel属性の値が「stylesheet/less」であることが重要です。さて、ここでstyles.lessにゴリゴリ書けばできる筈だ−！

Chromeでerror。[XMLHttpRequest cannot load. Cross origin requests are only supported for HTTP.]

アレ？？（￣▽￣；

いきなり躓きました。Chrome/Operaです。
それを確認するためだけに、久しぶりにFirefoxとか起動しちゃいましたよ。Fxならちゃんと動きます。

どうもless.jsはXMLHttpRequestでファイルをゴニョゴニョやっているらしく、Macで普通にローカルのファイルを開くと「file:///Users/...」となるから「HTTPじゃないとダメだぜ？(ｷﾘｯ」と蹴られているくさい。あるいはXHRは基本的にクロスドメイン通信がダメだし、file://アクセスだとドメインも何もあったもんじゃないから、その辺りかな。とはいえローカルでXHRテストしているときに当たったことはないから、less.jsの実装の問題かも。

追記(2011-12-05): hokaccha+vantguarde多謝！
XMLHttpRequestでローカルファイルにアクセスする際の問題だった模様(参照 » ローカルのHTMLファイルからどこまで読み取れるか選手権 2011)。

  • IE9 → 許可すれば問題なし
  • Fx → 下位ディレクトリなら問題なし
  • Chrome →自分自身のみ
  • Opera → 設定を有効にすると読める
  • Safari → デフォルトの状態で問題なく読める

Chromeの設定でどうにかできそうな気はしますが、面倒そうなのでローカルにサーバ立てちゃうことにします。Macならもともとapache2が入っているので、5分でできます。

  1. 「less.com」がローカルを向くように指定 → $ sudo vim /etc/hosts 
    127.0.0.1   less.com
  2. 「less.com」でアクセスしたときに読み込むディレクトリ等を指定 → $ sudo vim /etc/apache2/extra/httpd-vhosts.conf 
    <VirtualHost *:80>
    ServerName  less.com
    ServerAdmin admin@less.com
    DocumentRoot "/Users/sigwyg/Dropbox/Library/GitHub/less"
    ErrorLog    "/private/var/log/apache2/less.com-error_log"
    CustomLog   "/private/var/log/apache2/less.com-access_log" common
    
    <Directory "/Users/sigwyg/Dropbox/Library/GitHub/less">
        AddHandler cgi-script .cgi
        Options Indexes FollowSymLinks MultiViews +ExecCGI
        AllowOverride All 
        Order allow,deny 
        Allow from all
    </Directory>
</VirtualHost>
  3. apache再起動で反映 → $ sudo /usr/sbin/apachectl restart

はい。これでできました。これでChromeで普通に開発できます。

変数

変数使えます。

LESS コンパイルされたCSS 
@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins

Mixin(コピペを楽にするコードブロック)できます。

LESS 変換後のCSS 
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

#header {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

ネスト

ネストで記述すると、セレクタの繰り返しを視覚的に判りやすくできます。

LESS 変換後のCSS 
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}
 
#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;
}

演算

変数の値を掛け算とか足し算とかできます！

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%);
}

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

おわり

とまあ、こんな感じでいろいろ楽になりますよ、と導入までの流れ。
「黒い画面に一切触れずに使えるよ。凄いねLESSちゃん！」という記事にするつもりだったのに、どうしてこうなった...

LESSについて具体的なことはドキュメント観るか、後続のAdvent Calendarにご期待ください。@importとか便利になってますし、SassにあってLESSになかった@extendって機能も、昨日のSugamoでほかちゃんが作ってました。

LESSはJSなので開発者多いし、足りない機能もすぐ実装されるよ。なんだったら僕が作るし

—いつだかのSugamo.cssにて @hokaccha

...とのことでしたが。有言実行かっこいいね！@hokaccha++

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。