/CSSのプロパティを管理できるLESSのサンプル2012.05.06CSSのプロパティを管理できるLESSのサンプルTweetTweetWebデザイナーの方であれば、CSSのプロパティをいちいち設定するのが面倒臭いとか思ったことはないですか?今回紹介するのはそんな軽いところから、複数サイトの似たテンプレートを作成する上で、一括でプロパティの値を変更したり、クロスブラウザ対応も即対処できるようなツール「LESS」を紹介します。LESSについてLESSはCSSのプロパティを変数定義できたり、条件によってプロパティ値を変更したりしてCSSファイルを動的に生成できるTOOLです。プログラマーにはなじみやすい関数に似たmixinというものも用意されていたりします。LESS本家:http://lesscss.org/LESS日本語:http://less-ja.studiomohawk.com/LESSエディタ「crunch!」入手先:http://crunchapp.net/開発環境Crunch!をgithubからダウンロードします。ダウンロードが完了したらインストールしてください。以上で開発環境は完了です。Life」さんのログイン画面をサンプルとして利用させて頂きました。このログイン画面のstyle.cssを元にLESSファイルを作成し、CSS変換してみたいと思います。今回はLESSの勉強用として、以下のように変更を加えています。初期化(reset)とヘッダー(head)、コンテンツ(contents)とファイルを分け、LESSのパラメータ用に(param)ファイルを作成。margin/padding/background/colorのプロパティ値をparam.lessで管理するよう修正、テストなのでgifファイルも1つparam.lessで管理するよう修正#contentsのノード以下に配置される子ノード(h1,ul,p等)をネストで表現するよう修正mixinを使用して、ログインのBoxに影(shadow)を追加し、クロスブラウザ対応させたできたファイル一覧param.less『変数』を宣言しています。変数とは、ここでは任意の数字や文字をいれる箱のようなものです。以下LESSソースだと「@mar」という箱に0を設定しています。「@mar」はmargineに記載する予定の値です。0;」をイメージしています。white;」をイメージしています。先程も言ったように、ここではCSSプロパティとなりうる値を@~という箱にいれているだけです。10px;@gif:"bg_header.gif";reset.lessブラウザ依存の初期値のプロパティ初期化のイメージです。生成されるCSSは「reset.css」となります。{border:@bor;}head.lessコンテンツヘッダーのCSSです。上記param.less(param.css)ファイルを利用して使用します。param.lessを引き込みます、CSSファイル同様の定義です。各gif,margin,paddingプロパティにparam.lessで定義した『変数』を設定しています。repeat-x;font-size:small;letter-spacing:1em;}contents.lessコンテンツ部分のCSSです。head.less同様に『変数』を設定しています。その他に『ネスト』で設定しています。17~51行目を参考に見てください。li」といったような記述をブロック毎に宣言していましたが、LESSではそのまま#contents内部に宣言できます。ここではmixin(ミックスイン)と呼ばれるものを利用しています。8~16行目で「.mixin_msshadow」「.mixin_shadow」を定義し、#contentsの中28,29行目でこの2つの定義を利用しています。利用するだけでは参考になりませんので、パラメータの省略化とmixinの中で@argmentsを利用しています。パラメータの省略についてHTMLやCSSのコーディングをしている方は「???」となるかと思います。プログラミング経験のある方であれば馴染みやすいかもしれません。28行目の「.mixin_shadow」を例に解説します。mixinの定義では「.mixin_shadow」の引数は4つ宣言されています。3px)」となっています。#000)」となっていていいはずです。ここでは「#000」は省略しています。それは、12行目の「.mixin_shadow」の定義時に第4引数「@color」を予め「#000」で定義していたから省略が可能となっています。最初に言ったようにRuby,PHP,VB.netのプログラム経験者であれば馴染みあるのですが、HTMLコーディナーでは敷居は高いかもしれません。<p>ユーザ名・パスワードを入力して下さい。「Crunch!」の右上のCruchFileでCSSに変換します。以上でCrunchによるLESSファイル→CSS変換までできるようになりました。こちらのソースがLESS勉強の参考になれば幸いです。WebデザインSNSでもご購読できます。TwitterでフォローするFeedlyでフォローするcova香川・大阪を拠点として活動しているシステムエンジニアです。コメントをキャンセルコメント名前メールアドレス(公開はされません。)次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。