Mac(Lion)にnpmをインストールするのにはまった。

家のMBPにnodeをインストールしようとして、npmのインストールにはまったのでめも。

node.jsまわりの環境は結構な頻度でバージョンアップして方法が変わっている久野で注意が必要ですね。

ちなみにhomebrewを使ってインストールします。

まずnodeをインストール

$ brew install node

これでnodeのインストールは終了。

npmをインストール

やり方を忘れてしまっていたのでちょっと調べてやってみたけど以下のコマンドだとだめ。

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

で、sudoつけないとちゃんとインストール出来ないぽかったので、sudoを追加

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

正直こういうコマンドとか詳しくないので、なんで駄目だったのかいまいちよく分かってないですが、とりあえずこれで動いたのでよしとしよう。

Mac(Lion)にnpmをインストールするのにはまった。

stylusを使ってみる。

最近ではCSSをコーディングするのにも、CSSフレームワークを使って行うことが増えてきました。
僕自身Sassを使うことが多いのですが、node.jsのモジュールの一つにStylusというCSSフレームワークが結構いい感じなので、ちょっと遊んでみた。

node.jsのインストールなどは、他の方が分かりやすくまとめていらっしゃるので、割愛。

Stylus

node.jsのexpressというモジュール入れて、実行すればstylusが使えるようになるので面倒な人はそれでいいかと。僕はめんどくさがりなので、expressで突っ込みました。

stylusはsassの記法と同じような感じで、{}や:や;を使わずにタブかスペースのインデントを入れ子にして書いて行く事ができる。

.sample
	padding 5px
	a
		display block
		border solid 1px red
		&:hover
			background blue

のように書くと…

.sample {
	padding: 5px;
}
.sample a {
	display: block;
	border: solid 1px #f00;
}
.sample a:hover {
	background: #0f0;
}

と吐き出される。

もちろん変数も使えるので、

bgcolor = #ccc
.sample
	background-color bgcolor

のように書ける。

個人的にsassと比べてstylusが便利だなと感じたのは、ブロックレベルでのプロパティ値の参照と親に戻れる仕組み。
例えば、

.sample
	width 12px
	height @width
	.parents &
		border solid 1px red

と書くと、

.sample {
	width: 12px;
	height: 12px;
}
.parents .sample {
	border: solid 1px #f00;
}

のように吐き出される。

@を付けてプロパティ名を指定すると、そのブロック内で指定したプロパティに設定した値が参照できるので、同じ値を入れる必要も無くなるし変更もしやすい。

また、&を使う事で、それまでのセレクタの前にセレクタを挟み込む事ができるので、
ある要素のStyleを記述していて、親のclassなどのセレクタによって表示を変えたいような場合に、構造を保って書いて行けるので慣れれば管理しやすくてかなり便利かなぁと思っている。

詳しくはTry Stylus Onlineに分かりやすく説明があるので気になる人は使ってみるといいかも。

慣れればsassよりも使いやすいのかなぁ。

11/30追記

Sassもvar 3.0以降で親に戻るセレクタが用意されてたみたいです。

stylusを使ってみる。