CSSを構造的に書こう!「LESS」を使う為の準備はとても簡単!

lessを使ってみました

前々からLessとSassについては知っていたのですが、ようやく試す事ができました。

CSSをより便利に使えるLessやSassは使わないのはもったいない。

今回は簡単に導入できそうなのでLessに挑戦してみます。


Lessってなんだ?

Less(レス)ってなんだろうというアナタ!

他のサイトで事細かに説明されていますのでこちらを見てください!

ASCII.jp:CSSの記述が3倍速くなる「LESS」の使い方

CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。

あまり難しくとらえずにCSSにプログラミングの要素が加わって直感的に書ける様になったくらいの気持ちで始めるといい気がします。

変数が出てきますのでphpやjavascriptを少し習得している方はLessを抵抗なく使えると思います。

Lessを使える様にしよう!

Lessでの記述を行う為にファイルの準備をしていきます。

LESS « The Dynamic Stylesheet language

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

公式サイトからless.jsをダウンロードしてheadタグ内から読み込みます。

例:
[javascript]
<script type="text/javascript" src="common/js/less.js"></script>
[/javascript]

拡張子がlessのファイルを用意してlinkタグで読み込みます。

通常のCSSならばrel="stylesheet"になるのですが、lessファイルはrel="stylesheet/less"としないと動いてくれません。

この2つの項目さえしっかりとやればlessの導入は完了です。

あとは通常のCSSと同じように扱えます。

このままですとブラウザでの確認をする際にサーバサイドでないとcssが反映されません。

xamppやmampのようなアプリを使ってローカルサーバで確認をしていきましょう。

sublime text 2でlessで作業できるようにしよう

less.jsを読み込むとlessの記述が使えるのですがエディターへの対応も忘れずに行いましょう。

sublime text 2のパッケージをインストールしてLessに対応させる事ができます!

sublime text 2でlessに関するパッケージ

Sublime Text 2でLessに関するパッケージは画像の通り。

  • LESS
  • LESS-build
  • Less2Css
  • CSSLess(ish)

4つのパッケージがどのような役割なのかを調べてみました。

LESS

記述したコードをハイライトしてくれます。

さらに、間違った記述がある場合、シンタックスエラーを出してくれるので制作の際に強い味方になってくれます。

LESS-build

ビルド機能の強化パッケージです。

command + bで.lessファイルを.cssに変えてくれます。

コンパイルが必要なら入れておいても良さそうです。

ただし、node.jsが必要のようです。

Less2Css

lessファイルを保存すると自動的に.cssファイルを生成してくれます。

コンパイルが必要な場合、LESS-buildよりLess2Cssの方が便利に使えそうです。

CSSLess(ish)

日本語の情報がなかったので詳しくはわかりませんでした。

This is a SublimeText 2 plugin that facilitates a very very stripped down version of the functionality in LESS css.

きっといい感じにlessを使えますよ的なことが書いてあるに違いない。

ただ、情報がないのでインストールは保留。

LESSをインストール!

上記4つの中でLESSは必須ですね。

勉強の味方「ドットインストール」でlessについて勉強中です。

lessを勉強中

LESSをインストール。

LESSの項目が追加されました

LESSの項目が追加されました。

再起動をするとタグのハイライトが反映されます。

LESSがハイライトされるようになりました。

この状態で間違った記述があるとこんな風にシンタックスエラーを出してくれます。

シンタックスエラーを出してくれるようになりました。

@h1ize is undefined

@h1izeとか何言っちゃてんの?そんなのねぇし!
……てか、16行目を直せば動く様になるし……

と言った具合にツンデレ気味にエラー箇所を教えてくれます。

ちなみに入力補助はないようです。

lighten、darkenを入力してみたのですが補助してくれませんでした。

darkenやlightenは入力補助してくれませんでした

こういった所での細かい補助が欲しいですね。

全部打ってからハイライトしてくれるのもありがたいのですが、入力補助があると作業スピードが飛躍的に上がりますからね。

Lessではないですが、CSSでもtext-shadowの入力補助がないのも気になります。

何か設定が必要なのか…?

他のパッケージは自動でコンパイルしてくれるものだったので今回は見送ります。

ただ、lessのまま、サーバにアップすると表示時間がかかってしまったりとコストパフォーマンスが悪くなるそうです。

しばらくは習作の為に使いますのでless.jsで使っていきたいと思います。

実際にサーバにアップする際にはコンパイルして運用したいと思います。