stylusのライブラリnibを試してみた。

SassにCompassという強力なライブラリがありますが、StylusにもNibというライブラリがあるのを最近知ったのでちょっと使ってみた。

nib – CSS3 extensions for Stylus

環境:Node.js -v0.6.11

nibを使う環境を作ってみる。

個人的に環境作成が一番苦手なので、とりあえずexpressでstylus入れると伴にごにょごにょやったらいけた。

expressでとりあえずstylusをインストール

$ express nib_sample -c stylus

nibをnpmでインストール。

$ npm install nib

canvasをnpmでインストール。

$ npm install canvas

念のためもろもろ関連モジュールインストール

$ npm install -d

さて、node.js+stylusの環境は整いましたが、これだとnibが使えないので、まだ手を加えてないapp.jsに追記する。

requireにnibとstylusを追加。

var express = require('express')
  , routes = require('./routes')
  , stylus = require('stylus')
  , nib = require('nib');

コンパイルオプション用関数追加。

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib());
}

stylus呼び出し部分に追記compileオプションを追記。

app.use(stylus.middleware({ src: __dirname + '/public',compile: compile }));

以上で環境作成完了。どっかで詰まるかと思ったけど案外すんなり導入できました。

nibを試す

nibをimportするだけでそのドキュメント内で便利なメソッドを使うことが出来ます。

@import 'nib'

便利機能1:ベンダープレフィックスが自動で付く

ベンダー意識せずに通常のプロパティを書くだけで補完してくれるのは楽でいい。

stylus

border-radius 10px

css

.test{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

便利機能2:CSSグラデーションをbase64でも。

主にIE対策。グラデーションの指定にサイズを指定するとbase64で書き出してくれる。デフォルトじゃないので使いたい場合しか動作しないのも嬉しい。

stylus

.sample1
	background linear-gradient(top, white, black)
 
.sample2
	background linear-gradient(600px (bottom left), white, black)

css

.sample1 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
	background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
	background: -moz-linear-gradient(top, #fff 0%, #000 100%);
	background: linear-gradient(top, #fff 0%, #000 100%)
}
 
.sample2 {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAJYCAIAAAAsaRvIAAAABmJLR0QA/wD/AP+gvaeTAAAARklEQVRIidXOsQkAMAzEQNn77+w0CYQMEPRu3nCNYF9VNdBAn//dX2ZoSDFDQ4oZGlLM0JBihoYUMzSkmKEhxQwNlzEzDSzjNwqgeD+EAwAAAABJRU5ErkJggg==');
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #fff), color-stop(1, #000));
	background: -webkit-linear-gradient(bottom left, #fff 0%, #000 100%);
	background: -moz-linear-gradient(bottom left, #fff 0%, #000 100%);
	background: linear-gradient(bottom left, #fff 0%, #000 100%)
}

便利機能3:positionの記述が簡略化

.sample1
	absolute top 10px left 20px
 
.sample2
	fixed top 10px left 20px

css

.sample1 {
	position: absolute;
	top: 10px;
	left: 20px
}

.sample2 {
	position: fixed;
	top: 10px;
	left: 20px
}
	

便利機能4:clearfixの簡略化。

これはsassのextendの方が一つにまとめて書けるから、sassの方が優秀と思う。

2012.4.10訂正:stylusにもextendがあるので併用すればいいだけでした。

stylus

.sample1
	clearfix()
.sample2
	clearfix()
	

css

.sample1 {
	zoom: 1
}
 
.sample1:before, .sample1:after {
	content: "";
	display: table
}
 
.sample1:after {
	clear: both
}
 
.sample2 {
	zoom: 1
}
 
.sample2:before, .sample2:after {
	content: "";
	display: table
}
 
.sample2:after {
	clear: both
}

便利機能5:text-overflowしたいときに一行で完結できる

僕は良くスペル忘れがちなので非常に嬉しいw

stylus

.sample1
	overflow ellipsis

css

.sample1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

便利機能6:リセットをまとめて書ける。

いろんなCSS読みまくってたり、管理不純に陥ってる場合に地味に嬉しい。
こまかくリセットできる要素を指定できるので使い勝手はいいのでは?(コードは無駄に重くなっていくけど)

各リセットの関数

まとめ

compassは個人的に機能が多すぎて使い切れないんですが、nibくらいだとちょっとした補完+αな感じだと使いやすい印象です。

ちょっと試した程度ですが、自作していたmixinを使わなくて済むのと、コードが非常に完結になるので、今後は積極的に使っていこうかなぁと思ってます。

stylusのライブラリnibを試してみた。

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をインストールするのにはまった。