LESS http://lesscss.org/
CSS記述時のフラストレーションを、劇的に軽減してくれそうな仕組みが登場しました。
CSSを拡張した「LESS」です。
半年以上前から存在するようです。下記サイトの説明が、非常にわかりやすいです。
extends CSS ? LESS - Learner CSS（の和訳）- kmxslog
LESS を使えば、変数や入れ子構造で CSSコードをすっきり記述できます。
CSSが書ける人は、いくつかのルールを覚えるだけで、すぐにLESSのコードを書けるでしょう。
CSS3もサポート。Mac、Windows、Linux、いずれでも使えるようです。
主なメリットは・・・
- 変数が使える。複数箇所で使う文字列などを変数にすると使い回しできてスッキリ。
- 構造化して記述できる（特定のセレクタの指定を別のセレクタ内の記述に埋め込んだり、入れ子構造で書けたり）。
WEBブラウザは LESS のコードを解釈できません。
LESSのコード を CSS にコンパイルする必要があります。
文章の説明だけだとイメージしにくいと思いますので、 実際のコードで見てみましょう。
次は、LESSのコードです。コード内のコメントに説明を書いています。
/* - - - - LESS - - - - */
/* コンパイル後、コメントは消える */
/* - - - - - - - - - - - - - - - -
変数
- - - - - - - - - - - - - - - - */
@brand_color: #4D926F; /*変数は頭に"@"を付ける*/
#header { color: @brand_color; } /*コンパイルすると変数が代入される*/
h2 { color: @brand_color; } /*同上*/
/* - - - - - - - - - - - - - - - -
特定セレクタの設定を使い回す
- - - - - - - - - - - - - - - - */
/*クラス bordred の設定を使い回す例 */
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered; /*コンパイルすると .bordered のプロパティと値が展開される*/
}
.post a {
color: red;
.bordered; /*同上*/
}
/* - - - - - - - - - - - - -
入れ子構造
- - - - - - - - - - - - - */
/* インデントを入れると一目で構造がわかる */
#header {
color: black;
.navigation { /*コンパイルすると #header .navigation に変換*/
font-size: 12px;
}
.logo { /*コンパイルすると #header .logo に変換*/
width: 300px;
:hover { text-decoration: none }
}
}
上記コードに拡張子「.less」を付け保存した後、コンパイルすると、下記の CSSファイルが生成されます。
/* - - - - CSS（実際はこのコメントはない。説明用） - - - - */
#header, h2 { color: #4d926f; }
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#header { color: black; }
#header .navigation { font-size: 12px; }
#header .logo { width: 300px; }
#header .logo:hover { text-decoration: none; }
見事にCSSに変換されます。
ショートハンド記述にできるものは、ショートハンド記述にしてくれるようです。
LESS ファイルを保存するとき自動で CSS にコンパイルする機能も付いていますので、WEBブラウザや Dreamweaver や Coda などでプレビューを確認しながらの作業も大丈夫です。
LESSコンパイラ のインストール
コンパイルには、Ruby と Rubyのライブラリ管理ツール「RubyGems（コマンド名はgem）」を使うため、事前にインストールが必要です。
- Ruby と RubyGems をインストール。Mac OSX には標準で入ってます。
- LESS のインストール。Mac の場合、ターミナルでコマンド "sudo gem install less"。以上でコマンドラインからコンパイルできるようになります。
「LESS.app For Mac OSX」のインストール（Mac OSXの場合）
Mac OSX には、ドラッグ＆ドロップで LESS を CSS にコンパイルしてくれるアプリケーション「LESS.app For Mac OSX」が用意されています。ダウンロードして解凍すると、アプリケーション本体ができるので、アプリケーションフォルダに移動してください。
コンパイルの仕方
ターミナルからのコマンドライン入力
$ lessc ファイル名 例）$ lessc style.lessその他のコマンドはこちらを参考にしてください。
「LESS.app For Mac OSX」を使ってコンパイル（Mac OSXのみ）
-
アプリケーションを起動し、lessファイルを含むフォルダをパネルにドラッグ＆ドロップします。
- コンパイル画面に切り替えてボタンを押すと、CSSファイルを生成してくれます。「Automatically compile files when saved」にチェックを付けておくことで、LESS ファイルを保存するときに自動で CSS にコンパイルしてくれます。
Twitterで「神からWEBデベロッパーへのギフト」という賞賛の声もありました。
この記事では紹介していませんが、変数を使って計算したり、名前空間できめ細かい指定をしたりと高機能です。
本当に業務で使えるものかどうか、実際使って試してみようと思っています。
「Pomodoro Technique（ポモドーロ・テクニック or ポモドーロ法）」という時間管理術があります。実践してみたところ自分と相性が良いようで、劇的に集中できる時間が増えました（今まで集中できなさ過ぎたのですが ^_^;）。とにかくタイマーを作動させチクタク音の中作業にとりかかれば、自然と集中できるのです。25分という時間設定も絶妙です。私は使ってませんが、Twitterと連携できるMac用のアプリケーションもあります。モチーフが「トマト」とかわいいのも◎です。
無料版と有料版（115円）がありますが、無料版で十分だと思います。ポモドーロ・テクニック用のiPhone用アプリは、他にも「pomodoro timer」「pomodoro」「iPomodoro」などありますが、基本は単純なタイマーなので好みで選べば良いでしょう。タスクの記録機能が付いたものなどもあります。
