ダイナミックな構文でCSSを書くことができるLESSについて学びます。

タイトルとおりほんとに無料すか？っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。 CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。 追記:現在は無料版はなく有料版のみっぽいです (2015.04.05) Preprocessing just got easier with Prepros Prepros 現在バージョンは1.7。Windows版のみリリースされています。 追記:バージョン2.2でMac版も出ました (2013.07.11) Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。 すでに海外の記事では「WindowsのCodekitだぜ！」みたいなことが言われてるとかいないとか。 Preprosの主な機能 Preprosの主な機能として ブ

ドットインストール代表のライフハックブログ

特定のベンダープレフィックスのみを付けるには 前回はTwitter Bootstrapを題材として、mixinの実用的な例を見ていきました。今回はさらに発展させて 「この値がfooの場合に、この値をvarにする」 といった、条件分岐を入れたmixinを作ってみましょう。これをマスターすれば、より複雑なmixinを書くことができます。 まず、前回とりあげた参考のmixinを見てみましょう。 // LESS .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } これは前回解説したように、各ベンタープレフィックスを付けた状態で、border-radiusをいっぺんに記述をしてしまうmixinでした。このような使い方はmixi

最低限おさえておくべき6つの記法 前回はLESSが解決してくれる悩みと、less.jsの利用法をご紹介しました。 今回はいよいよ実際にLESSを書いていきましょう。 とはいえ、LESSの記法の中でもよく使われるものと、あまり使われないものがあります。今回は初級編として、LESSを使うなら必ず覚えておきたい記法と、その活用法、注意点などを見ていきましょう。 LESSで基本として押さえておくべきは下記6点です。 ネスト 変数 ミックスイン 演算 コメント インポート これだけでもCSSのコーディング速度が1.5倍くらいになり、十分にLESSの恩恵にあずかれます。 順番に見ていきましょう。 なお、コードの見かたは以下のとおりです。 ネスト　～CSSのセレクタを入れ子にする ネストとは、以下のようにCSSのセレクタをどんどん入れ子にして書いていくことです。 // LESS #header { h1

前回ご紹介したネストは、階層構造をわかりやすくするとともに、無駄な繰り返しの記述を減らし、コードを速く書くことができる便利な記法です。今回ご紹介する応用記法を利用すれば、それらにさらに磨きをかけることができます。 ネスト時の変数のスコープ（参照範囲）を理解する 変数の内容は、要所で新たに定義しなおすことができます。 たとえば以下の例では、最初に@varという変数の値をredとしていますが、header内でwhiteと定義しなおしています。 // LESS @var: red; header { @var: white; nav { background: @var; //headerで宣言された@var（white）を参照 } } footer { background: @var; //一番最初に宣言したグローバル変数の@var（red）を参照; } /* Compiled CSS */

今回は、すでに宣言されている色や数字を計算する方法をご紹介します。 もちろん、頭の中や他のツールを使って計算することもできるのですが、それをLESSで行うメリットがあります。 カラー関数で色の変更に柔軟に対応する CSSにおいて、色の扱いは非常に融通のきかない、厳格なものです。 たとえばデザインをする際、グラフィックソフト上では基準色に対して 「色相を少しずらす」 「明度を少し明るくする」 といった形で色を作ることがあるでしょう。 しかし、最終的にはその色を直接CSSに記述する必要があります。そのため、基準色が変更になれば、それに伴いほかの色もすべて変更する必要がありました。 LESSではそのようなケースに柔軟に対応するために、色を演算する機能があります。それがカラー関数です。 カラー関数では、色の三属性である 明度（hue） 彩度（saturation） 色相（lightness） さら

Twitter Bootstrapからmixinの使い方を読み解く 前回まででLESSの主だった記法はすべて紹介しました。 今回からはLESSの真骨頂であるmixinの作成に入ります。 まずはおさらいとして、第2回のmixinのサンプルコードを見てみましょう。 // LESS .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { .border-radius(4px); } /* Compiled CSS */ #header { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } このように、CSS3

今までの例では変数に色（カラーコード）やpxなどの数値を宣言して扱っていました。前述のカラー関数やMath関数で変換や計算ができるものです。 しかし、LESSでは通常の文字列も変数に代入することができます。 「CSSで文字列？」と思われるかもしれませんが、urlやcontentなど、文字列の出現頻度は意外と高いものです。 CSSの概念からかなり外れた話なのでちょっと難しいかもしれませんが、文字列の宣言から編集の仕方まで、ポイントを1つずつ見ていきましょう。 文字列を宣言するときの注意点 まずは文字列としてそのまま出力されわかりやすい、contentプロパティを用いた例を見てみましょう。 // LESS @foo: 'var'; content: '@foo'; 「var」という文字列を「@foo」で宣言してcontentの中に入れると、どのように表示されるでしょうか？ 想定としては以下のよ