CSSのコーディングをスピードアップする方法で、LESSやSassのようなCSS拡張メタ言語があります。

最近になって使い始めたのですが超便利ですね。

参考：CSSの記述が3倍速くなる「LESS」の使い方

 

僕はLESSの方を使っています。ローカル環境でコーディングするにはless.jsがあるので便利なのです。

しかし、このless.jsですがローカル環境のChromeでは動きません。

Firefoxでは普通に動くのに。

 

調べてみるとChromeのjavascriptのセキュリティが問題のようです。

僕はChromeを基本的に使うので、今更FireFoxを使えといわれても困ります。

デベロッパーツールもChromeの方がなれているし。

 

ということで、どうにかこの問題を解決できないかと調べた所、Chromeを起動させる際に下記の起動オプションを付ければOKになるらしい。

--allow-file-access-from-files

 

つまり、ターミナルを起動して↓のように打てば良いということですね。

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --allow-file-access-from-files

 

このコマンドで起動したらless.jsが効いています。

 

※さっきまでcssが効かずに崩れていた。

---

このコマンド用のアプリを作成した

しかし、毎回これをターミナルから打つのも面倒くさいのです。

そこでMacならAutomatorの登場です。あのロボットです。

参考：Mac Automator

こいつを使って先程のコマンドを実行するアプリを作ればよいのです。
作り方は↓この通り。簡単です。

 

んで、これをアプリとして保存。

調子にのってロゴも作ってしまいました!

 

↓この通りドッグにも格納。それっぽい!

---

ということで、このアプリは下記からダウンロードできます。
良かったらどうぞ。less.jsライフを！
※アプリを起動する時はchromeを完全に落としてください。

 Chrome for lessをダウンロード