eyemovic inc.

Culture blog会社の活動・働き方

2012.02.23

メメタァ

最近、「北斗の拳」を読み返して、血がたぎっています。
やまむらです。

私は、HTMLコーディングをメインですることがあまり無いのですが、たまにHTMLを編集するときに、CSSに同じような記述が繰り返されているのをみると「イッー!!」ってなることあります。色の指定を変えるだけでも、すごくめんどくさいです。

他にも、スターハックとかインポータントハックとか、裏の技術継承的な奴もあまり好きじゃないですし、結局こう言うのもスニペットとか使ったりしちゃうわけですよ。そんなCSSだからこそ、変数利用も含めもっともっとスマートに出来る部分って多いんじゃないかなと思っていたわけです。

これらを解決する手段として、去年ぐらいから話題になっているのがCSS拡張メタ言語とよばれるものです。この中でも特に有名なのが、less と Sass(SCSS)です。

環境的には、lessは、クライアントサイドでの変換は、Javascriptでサーバーサイドでの変換は、node.js(今、個人的に一番熱いです。)を使います。
Sass(SCSS)は、サーバーサイドでRubyを使って変換します。手っ取り早く試せる lessのほうが導入障壁は低いのかなーと思ってたりなんかしてます。

どっちも出来ることは同じようなものなので、less でどんなことができるのかを簡単に紹介したいと思います。
(本家サイトを見るのが一番わかりやすいですけどね。)

1.変数が使えます。

@ホニャララが変数になります。最初に@ホニャララで定義すると
以降は、@ホニャララ部分がCSSに変換されたときに置き換わります。

色の変更で一括置換しなくてもいいんですよ!

2.ミックスインしちゃいます。

ミックスインはいくつかの定義をまとめる機能です。
値を渡すこともできるので、下の例のようなことも簡単にできます。
ミックスイン集をつくれば、技術継承も楽ちんになりますよ。

3.ネストできちゃうぞ。とにかく見やすいぞ。

CSSで冗長な記述になりやすい部分が、ネストを用いて記述できるので
視覚的にも分かりやすくなります。

4.計算もできるんだぞ。

計算処理も記述できるので、以下のようなことも可能になります。

最近、一部でちょっと話題になったBootstrap, from Twitterもlessを使っています。
CSS拡張メタ言語ってどんなんかなって気になった人は、一度ソースをダウンロードして見てみたら楽しいかもしれないです。

先日、CSSで変数が利用可能になるかもというニュースがありました。現在は、Editor’s Draftということで、実際に使えるようになるのはまだまだ先のようですが、ようやく仕様として定義されたのかという感じでした。正式な仕様として、CSS拡張メタ言語的なことができるようになれば、みんなハッピーなのになぁと思ったりします。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。