はじめの一歩!CSSをもっと便利に書けるLESSとは

2012年05月22日

less

新年度が始まってからもう2ヶ月が経ってしまいましたね。「あー今年度も憂鬱だぜおい」と五月病がまだまだ継続中のあなた、大丈夫ですか?たまには何も考えずに休むことも大事だと思いますよ。

えっ?「休みなんか取れない」ですか?えぇ、そうですね。でも心がすり減ってなくなってしまうほどに働いて、ふとした瞬間にプツンと事切れてしまってそのまま失踪、というケースもあるようですから、多少強引でも良いので休んでくださいね。てか休め!

そんな殺伐とした5月を今日も生き抜いておりますむゆう(@anticyborg)ですが、みなさんは如何ですか?

さて、みんな、CSS書いてる?僕書いてる。

でもあれ、正直めんどくさくない?僕めんどくさい。

例えばさ、「 #content 」って何回書かせれば気がすむんだよ!とか思いません?僕思います。

なので、それを少しでも楽ちんにしたいなぁと思ってたところにLESSというものの存在を知りました。奥さんこれが凄いんですよ。

例えば、階層化できます

こういった記述が、LESSを使うとこうなります

何か視覚的に分かりやすい気がしませんか?htmlの構造と同様に要素を入れ子にできるので、どの辺にどの指定があるかが分かりやすい気がしません?僕はします。

他にも便利な機能がある、CSSをちょっと便利に分かりやすく書けるLESSについて僕の知ってることを書いてみようかと思います。

LESSってなに?

言葉の由来とかは知らない。各自調べるように。ここ試験出るよ。

LESSとは

LESSは変数、ミックスイン、演算、そして関数のような動的な処理をCSSに追加拡張できます。

出典:LESS – The Dynamic Stylesheet language

よく分からーん!!Σ(゚д゚lll)

ノンプログラマに分かるように書いてほしいですよね。いやまぁ僕は一応プログラムは多少書けるんですけどね。えっと、平たくいうと、

CSSを便利にしちゃった♪

で良いんじゃないかな。うん、分かりやすい。

LESSのすごいところ

LESSはさっき書いたように、htmlの構造と同様の階層構造で記述することが出来るので、見た目的にコードを読みやすくなっていると思います。

でももちろんそれだけじゃありません。他にも色んな便利機能を取りそろえておりますよ。僕が何となく把握している便利機能を紹介してみますね。

同じ事を何度も書かなくて良くなる

カスケーディングスタイルと銘打ってはいても、一度上書きした指定を元に戻すという事は出来ません(できないよね?)。進んでしまった時間は元には戻らないのです。ただ自らの力で進めることは出来るのです。何故指令?

そういう時にLESSだったら、元に戻すことが出来るのです。いえ、失礼、そうではありません。いくらLESSでも時計を元に戻す事は出来ません。できることはそう、「以前の状態を覚えておくこと」です。

こういうケースって結構多いですよね。

それをLESSはこうやって解決します。

@の次に名前を書くと、その次に書いた値を保存しておくことが出来ます。使う時は再度@の次に名前を書けばよしです。何となく良さ気ですね。何度も同じ記述をしなくて良いし、修正が入った場合も最初に書いた箇所だけ変更すれば良いですしね。

よく使うスタイルを使い回せる

先ほど紹介したのは何度も使う「値」を登録しておく方法ですが、値だけでなく「所定のスタイル自体」を使い回すことが出来ます。

「.なんちゃら」って記述だからclassみたいで紛らわしいんだけど、classだったら「;」で終わらないからそこで判断すれば良いですかね。

「.なんちゃら」と記述すればそれが適用されます。これ、次に書くことと合わせて凄く汎用性が高い感じのことが出来ますよ。

数値を指定して一定のスタイル毎使い回せる

所定のスタイル自体を使い回すことが出来るんですが、これだと「同じスタイルのボタンなんだけど色だけが違う」って時には使えないですよね。

使えないと思いましたか?甘いですね、甘々です。それくらいのことが出来ないとお思いかい!何故ドロンジョ?

もちろんそれくらいちょちょいのちょいです。

ステキですね。これで色違いのボタンを一つ作って色んな箇所で展開できますね。

ちなみにこのように一つスタイルのまとまりを作る事を「Mixins」と呼ぶそうです。読みがどんなのかはしりませんが「みっくすいん」とかで良いんじゃない?

計算もできる

はてさてこれがどれだけ便利かは実はよく分かってないんですが、何とLESSは計算もできます。賢い子なんです!

ごめんなさいいまいちよく使い方が分かりません。どうやら色を足したり掛けたり出来るみたいです。何が良いの?誰か教えて下さい。

LESSを使うとこんな副産物が!

いかがでしょう。今まで紹介した内容だけでも結構楽になる気がしたのではないでしょうか。僕はしました。

さて、そんなLESSですが、「ちょっと良さそうだな」程度の軽いノリで使ってみると思わぬ副産物を得ることが出来ます。出来そうなんです、多分。

実は今まで書いてきた内容って、ほとんどプログラムの基礎知識みたいなものなので、例えば新たにPHPを覚えようとする場合、一番最初に覚なければならない難関をクリアしたことになるんです。なりますかね、多分なります。

例えば

時計の針云々で言ってた「@なんちゃら」はプログラムで言うところの「変数(へんすう)」です。「@なんちゃら」という箱にあらかじめ値(あたい)「10px(とか)」を保存しておくものです。保存したものは「@なんちゃら」で好きな場所に表示させられます。

また、ドロンジョ云々のくだりで書いたことは、プログラムで言うところの「関数」です。関数とは、ひとかたまりの処理をいつでも呼び出せるようにしておく魔法です。

もしかしたらhtml、CSSを覚えた人は、次にLESSを覚えてプログラム(PHPとか?)を覚える、みたいな流れになるかもね。というか、そういう流れはとてもスムーズだと思います。

ベンダープリフィックスをひとまとめに

そういえばもう一つありましたよ、便利な使い方。忘れてました。スマートフォンのCSS3対応が進んでいることで、CSS3が制作者にとってはそろそろ一般的になりつつあるのかなぁ、という感のある昨今ですが、一つ面倒なものがありますよね、えぇ、ベンダープリフィックスです。

一つのスタイルを指定したいのに何故何度も何度も書かないといけないのか。これほど精神が消耗することはありません。本当に心に毒です。

でも、LESSの先ほど紹介したmixinsを使えばその心の消耗もある程度減らすことが可能です。そう、LESSならね。

これを各々の指定毎に作っておくと幸せになるかもしれませんね。とか何とか言いながら僕はまだ作れてないんですけどね。

LESSの導入

さて、長々と書いた説明ですが、そういえば導入方法については何一つ触れていなかったですね。ではいい加減導入方法について説明させて頂きます。

今までの流れで何となく感じた方もいるのかと思いますが、LESSは普通にCSSファイルとして書いてもブラウザは認識してくれません。普通の仕様通りのCSSに変換する必要があります。

やり方は数通りあるんですが、できるだけ簡単な方法にしてしまおうかと思います。LESSをCSSに変換するJSファイルを読み込んでしまう方法です。

LESSをhtmlに読み込ませる

まず、LESSの書き方で書いたスタイルシートを「.less」として保存します。そのファイルは以下の書き方でhtmlから読み込ませます。

LESSを適用させるJSを読み込ませる

次に、LESSをCSSに変換するJSファイルをhtmlから読み込ませます。

以上になります。凄く簡単ですね。

さいごに

結構頑張って書いたんですが、LESSにはもっと多くのメリットがあると思ってます。ただしもちろんデメリットも存在します。

例えばJSで変換処理をかけるのだから、どうしても処理速度が遅いとか、例えばLESSの書き方をチーム全員が知っていないと使えないとか、そういったことはあるんですが、それには回避策もあるし、それをカバーしてあまりあるメリットがあると思ってます。というか全然書けてないこともいっぱいだし。

なので、これを読んで興味を持ってくれた方は是非色々試してみて下さい。きっと使えることだし、どんな形にせよ自分の力になると思います。

あ、あと、「なんでこれ書いてないの?」があれば教えて下さい。

他にこんな事も書いてます

FBでコメント

4個のコメント

  1. SS | はじめの一歩!CSSをもっと便利に書けるLESSとは http://t.co/0kdX9F3s @STACKSTOCK_twさんから

  2. 書きましたー(/’□’)/ はじめの一歩!CSSをもっと便利に書けるLESSとは:STACKSTOCK はじめの一歩!CSSをもっと便利に書けるLESSとは:STACKSTOCK http://t.co/PGB7QKe0

  3. あざーす! でも、SASSはやってないんすorz RT @shadeadworks: 猿でもわかった。次はSass記事を! RT @anticyborg: 書いた:はじめの一歩!CSSをもっと便利に書けるLESSとは – http://t.co/U6mwS1R2

  4. おぉぉ!! ありがとうございます!! 早速始めてみます ( ^o^)ノ “@anticyborg: @marushu 最初はLESSがお手軽で良いかもですよー。 手前味噌で恐縮ですが、入門的な記事です、よろしければ。 http://t.co/rsOFXU9N”

トラックバック/ピンバックはありません。