また紹介エントリーか。。。Sass布教活動の一貫です。どうも。

SassとかLESSって使ってますか？書くのがとても億劫なCSS（個人の感想です）を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります（個人の感想です）。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。

• CSSとフレームワークとメタ言語
• Sass、そしてSassy CSS (SCSS)
• Sass を今すぐ実務で使おうよ！
• Sassを覚えよう
• LESS初心者向けのナニカ

というか

• LESS & Sass Advent Calendar 2011（）

をみてください。

浸透しにくい理由は色々ある気がしますが・・・

コンパイルがめんどい

そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。

黒い画面がちょっと・・・

ではSassをインストールしましょう！OS Xの方はターミナルを開いて

$ gem install sass

を入力するとしばらくしてSassがインストールできるので、

$ mkdir ~/Sites/my-first-sass
$ mkdir ~/Sites/my-first-sass/styles
$ mkdir ~/Sites/my-first-sass/styles/scss
$ cd ~/Sites/my-first-sass/styles
$ touch scss/style.scss
$ sass --watch scss/style.scss:style.css

で、まずはコンパイルしてみまｓ・・・

なるほどですね。特にSassは黒い画面じゃないとだめみたいな先入観があるのではないでしょうか？

OS X Lionのみなさんは素晴らしいソリューションがあります

それがCodeKitです。

• CodeKit — THE Mac App For Web Developers

Winのことはよくわからないので、同じような事を誰かが書いてくれるでしょう。フロントエンドの制作でOS Xじゃない方が弊害が多い気がしますけど、個人の感想ですね。

Read more

「Less & Sass Advent calendar 2011」9日目のです。
流れをぶった切ってしまってあれなのですが、Node.jsとあわせてLESSファイルを動的にコンパイルするようなやつ書きます。

みなさんご存知の通りLESSはJSで書かれているので、Node.jsを使ったアプリでは動的にLESSファイルをコンパイルできます。

ところがLESSのサイトに書いてある方法は

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

・・・やさしくない！

まあでも早い話、parse(hoge, func)のhogeにLESSファイルの文字列渡せばtreeに結果が入ってくるってことですね。

これはLESSの記事というかNode.jsの記事じゃないのとかそういう細かいことはいいじゃないですか・・・

Read more