by shigemk2

当面は技術的なことしか書かない

Homebrewを使ってLESSを導入してみよう

CSS homebrew

Emacsユーザーのための LESS 導入。 - 日々、とんは語る。
Page not found · GitHub Pages

LESSとは

LESSとは、CSSメタ言語と呼ばれるもので、LESS の他に Sass(SCSS) と呼ばれるものがあります
（SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの）。

これを使うことで、よりCSSが書きやすくなったりします。
LESSで出来ることは、

  • ネスト
  • 変数定義
  • 関数定義

などです。

例

たとえばこのようなCSSがあったとしましょう。

article.hoge {
  font-size: 10px;
}
article.hoge h1 {
  font-size: 15px;
}
article.hoge div.e1,
article.hoge div.e2 {
  float: left;
  width: 14%;
  font-size: 10px;
}

いちいちarticleって書くの面倒ですよね。
それも、LESSを使えばこの通り。

@fs: 10px;

article.hoge {
  font-size: 10px;
  h1 {
    font-size: 15px;	
  }
  div.e1, div.e2 {
    float: left;
    width: 14%;
    font-size: @fs;
  } 
}

ちなみに、変数を定義するときはセクション名に@をつけるだけでいいんです。
さっきも言いましたが、LESSではネストを使うことが出来ます。

このlessファイルは、less.jsを利用しつつ、HTMLファイルに以下のように記述すれば、
LESSファイルを使うことが出来るようになります。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

npmを使ってlesscコマンドを使えるようにする

とはいえ、いちいちless.jsをインストールして使うのは若干面倒でもあります。
というわけで、このLESSファイルをCSSファイルに変換するコマンドが用意されていたりします。
それがlesscというコマンドであり、、npmからインストールして使うことが出来ます。

npmとは、Node Package Managerの略で、
Nodeのパッケージ管理ツールのこと。

ここからが本題で、そのnpmをHomebrewでインストールしたいわけです。

普通にbrew install npmと打つと、

brew install npm
Error: No available formula for npm
Homebrew does not provide npm because it is self-updating. To install it, first
`brew install nodejs' and then:

curl http://npmjs.org/install.sh | sh

こんな感じのエラーを吐かれました。

まあ要するに、brew install nodejsして、そのあとcurlうんたんすればいいわけですね。
(何気にnodejsとnodeという2種類のフォーミュラがあって、どちらもインストールすると

./configure --prefix=/usr/local/Cellar/node/0.6.17 --without-npm

とまあご丁寧に「npmはインストールしません」とか言っちゃってくれてます。

nodejsをインストールして、

brew install nodejs

curlからnpmをインストールする

curl http://npmjs.org/install.sh | sh

これでnpmのインストールが完了します。

そして、

$ npm install -g less

とすると、LESSファイルをCSSファイルに変換するlesscが使えるようになります。

使いかたは、

$ lessc hoge.less > hoge.css

です。
これで、LESSファイルがCSSに変換されるようになりました。パチパチー

ちなみに

EmacsでもLESS CSSモードがあり、Marmaladeやgithubからインストールできます。

Marmaladeが使えるなら

M-x package-install RET less-css-mode RET

auto-installなら

(install-elisp "https://raw.github.com/purcell/less-css-mode/master/less-css-mode.el")

みたいなね。