増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

less.jsはCSSプログラミング

      2013/06/28

こんばんわ!rmascoです。

最近macに慣れてきて、会社でwindowsを触ると、
なんかなんか・・・って思う時があります。
特に入力変換の時に、windowsだと半角全角を押しますよね。
でもあれって、今どっちかわからなくなるんですよね。。。
その点macだと「かな」というキーと「英数」ってキーがわかれているから、
こういう部分が便利だったりするのかなーとか思いました。

さて、本日は。。。
最近ネットでも少し見ることも増えてきた「less.js」についてです。

less.jsとは・・・
もともとはCSSの記述方法を便利にするLESSというRubyのプロジェクトがあったそうですが、それをJavaScriptを使って、実現するためのフレームワークです。

とはいえ、私自身も使った事無いので、Webから得た知識ですが。

たとえば、ベースの色が決まっていて、CSSで書こうとすると、
あらゆる場所に同じ記述をしなければならない。
プログラマにとっては気持ち悪いことこの上ない。

less.jsはそんな時に役立ちます。

使い方は簡単。

スタイルシートの読み込みの記述が少し違いがあり、
「rel=”stylesheet/less”」となっているのと、ファイルの拡張子が「.less」になっているところが違います。

実際何がすごいのかを見て行きましょう。
先ほどのstyles.lessに下記のような記述をします。

実際にCSSになるとどうなるかというと

一行目の変数定義でbase-bgとしてベースのカラーを定義しています。
あとはその定義を呼び出したいところで呼び出す。
こんな感じで一度変数として定義しおけば、その後呼び出すことができます。

こうすることでどこがよいのか。
一度背景をこの色で統一しようと思ったが、やはり背景を変える必要がでてきた。。。
でもCSSの至る所に書いてあり、修正がすごく大変(>_

.container {

padding: 10px;

overflow: hidden;

}

div {

background-color: @base-bg;

.container

}

実際にCSSになると

すごいです。すごいです。
最初に使用したクラス名の定義を簡単に引き継ぐことができます。

私が思うに、このlessという技術をそのままWebサイトに使うのではなく、
管理用ソースと、コンパイル済みソースという形で管理すればどうかなと思いました。
というのは、やはりJavaScriptをオフにしていたりすると見た目が崩れる・・・などの問題が発生します。

なので、開発中のCSSはlessで記述しておき、実際にWebサイトにアップする前に通常のCSSに戻し、
アップする。
これであれば、JavaScriptが動いていない環境でも使えます。

また、lessからCSSに戻すツールとして、下記が便利です。
lesstester.com

ちょっと今日は時間がないので駆け足になってしまいましたが、
後日私自身も使ってみてのレポートを書きたいと思います。

 - wordpress