nakagawa今からでも遅くない！lessを使用してcssを記述する
こんにちは。
みなさんお元気ですか？僕は今年から東京で働き始めましたが元気です。
さっそく質問なのですが、みなさんlessって使っていますか？
「less？なにそれおいしいの^q^」という方も中にはいらっしゃるのではないかと思います。
かくいう僕も使っていませんでした！導入がややこしそう、とか時間がないとかいろいろ言い訳がありまして。。。
ただ、「使ってみろ、捗るぞ」「え？何言ってるんですか？」という声を聞いていると
ちょっと遅いけど試してみようかなと思いましたので、今から試してみようと思います。
初めてですが、このエントリーを書きながら使い方を覚えたので、きっとすぐにできると思います。
（lessとSassとありますが、僕はlessにしてみました。Sassは後ほど試してみるつもりではあります）
■less公式サイト
http://lesscss.org/（別ウインドウで開きます。）
英語ばっかりですが、基本はここに書いていました。
今回の記事もこちらを参考にしています。
■こんなことができちゃう！
lessを使うと、cssで
- Variables（変数）
- Mixins
- Nested Rules(入れ子)
- functions&Operations(計算)
のようなことができるとのことなので、さっそくやってみようと思います。
■Variables
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @pd: 10px;@radius: 5px;@bgcolor: #eee;@line-h: 1.4;@txt-size: 12px;#contens{ width: 960px; backgeround: #fff; font-size: @txt-size;}h3 { background: @bgcolor; padding: @pd; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; text-shadow: 1px 1px #fff; line-height: @line-h;}p{ background: @bgcolor; text-shadow: 1px 1px #fff; line-height: @line-h; padding: @pd;} |
という感じです。
基本は
@変数名: プロパティと値
で数値を決定して、使いたい要素の部分に
セレクタ: @変数名;
とcssのような書き方で進めるだけです。簡単です。
変更があった場合でも変数で指定していれば、変数部分を変更すれば全体に
反映されるのでとても便利だと思います。
そしてこれを後述する方法で実行してみると。。。
実行後
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #contens { width: 960px; backgeround: #fff; font-size: 14px;}h3 { background: #eeeeee; padding: 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-shadow: 1px 1px #fff; line-height: 1.4;}p { font-size: 12px; background: #eeeeee; text-shadow: 1px 1px #fff; line-height: 1.4; padding: 10px;} |
「どん！」と言わんばかり、自動的に数値が反映されていつも書くcssが出来上がります。
初めてやると感動します。
■Mixins
またこれをまとめて使えるようなMixinsもあります。
1 2 3 4 5 6 7 8 9 10 11 | .round-corners(@radius:5px){ border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}p{ .round-corners;}h4{ .round-corners(10px);} |
実行後
1 2 3 4 5 6 7 8 9 10 | p { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}h4 { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} |
■Nested Rules
普段使っているzen-codingのような書き方なので、とても書きやすかったです。
個人的にはこれだけでも使う理由になりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #header{ h1{ font-size: 20px; font-weight: bold; color: #000; } h2{ color: #333; font-size: 16px; text-shadow: 1px 1px #eee; } p{ font-size: 12px; a{text-decoration: none; &:hover{text-decoration: underline; } }} |
実行後
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #header h1 { font-size: 20px; font-weight: bold; color: #000;}#header h2 { color: #333; font-size: 16px; text-shadow: 1px 1px #eee;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p ahover { text-decoration: underline;} |
■functions&Operations
変数を指定した状態で、演算子を使用して数値を変更することもできます。
1 2 3 4 5 6 7 8 9 | @border-width:1pxli{ border-right:@border-width *2; border-left::@border-width *4;}li { border-right: 2px; border-left: 4px;} |
というのが大きな使い方の4本柱になるのかと思います。
上にも書いていますが、やはり入れ子でcssの記述ができるのが一番大きい利点でした。
～コンパイル～
さて、ここまで書いたものの、このままではcssとして表示されませんので、コンパイルして、htmlに反映させていきます。
（headにjsを読み込む方法もありますが、こちらのほうが個人的には「できた！」感が強かったので、コンパイルする方法を書いていきます。）
■方法
アプリケーションでlessファイルをcssファイルに変更します。ディレクトリ設定を初めに設定しておけば、5秒で完了します。
【Win】
Less Parser（別ウインドウで開きます。）
AIRで作られているので、WinでもMacでも動きます。
【Mac】
less.app（別ウインドウで開きます。）
上記のLess Parserはこのアプリを参考に作られているようです。
どちらのアプリでも、lessの入ったファイルをドラッグすれば、自動的にcssファイルが作成されます。
また最初にサイト定義をしておけば、lessファイルが更新されれば、自動的にcssのファイルも
書き換えられるので、作業上はなんら問題はありません。
■最後に
個人的にはfunctions&Operationsは使いどころがちょっと難しいと感じましたが、それ以外はとても使いやすかったです。
最初は、どれを変数にして書いていくかということを計画する時間が必要になりますが、そこをクリアさえすれば確かにコーディングは捗ると感じました。
「なぜ今まで手をつけていなかったのか」というのが正直な感想です。
あまりにも感動したので、今までの自分を悔やむと共に、今後はこれで進めていこうかと思います。
ぜひ一度試してみて、この気持ちよさを味わって頂ければと思います。
