CSS拡張メタ言語SCSS(Sass)とLESS今回はCSS拡張メタ言語をご紹介します。なにそれ?って言う方も多いと思います。私も最近までそうでした。して知ったかというと前回の記事でCSSフレームワークでツイッターブートストラップがLESSを使用されているのです。それでコレなんだろって調べたらわかったんです。因みにツイッターブートストラップのSCSS版もあります。簡単に言うとCSSをより簡単に記述しようってことです。CSS記述するとき重複したり、それぞれのブラウザに対応するような記述やあとCSS3対応させるためになんだか長い記述しないとダメですよね。-webkitとか-mozとか。いうのを解消したものなんですね。自動的に計算なんかもやってくれる機能もあります。スポンサーリンクこれはかなり便利な機能です。最初にやるなら断然LESSだと思います。javascriptで簡単に実装できるしすぐに体感できるので。ウェブ上にアップするときは必ずコンパイルしてから利用してください。負荷が増えるのしJSが実行できない環境だと。SCSS(Sass)は機能が多いのでちょっとプログラム的な感じがします。個人的には使いやすいですが初めてやる方はちょっと難しいかもしれません。最近はこのような書籍も出てきて学習しやすくなりましたね。Parser私も利用しています。簡単で使いやすいのがいいです。AdobeAIRが入っているOSなら使えます。Parser使用しています。Win&Mac対応してます。・LessAPPMacで人気のソフトのようです。使った事無いですが一応Macユーザー用に乗せておきます。・LessTesterオンライン上でコンパイルするので楽です。今回の例はLESSです。ファイル名は.lessで保存してください。それからLESSのサイトからLESS.jsをダウンロードしてリンクしておきます。LESSファイルを作成してリンクし起きます。今回はgooglecodeからLESSコードを直接リンクしてあります。src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>まず初めに変数に入れ込む方法から説明します。LESSは@のあとのアルファベットで変数を作ります。@blueと@redで色を指定してやります。使うid属性に@redを指定してやれば赤色が入ります。色の計算なんかも出来ます。}ミックスインはクラス指定して値をまとめて入れ込みます。カッコはオプションで好きな数字で表せるようにしてあります。