Stylus入門

StylusはSASSやLESSのようなCSSメタ言語。某所で話題にあがったのでどんなことができるのか一通り触ってみました。

実行環境ですが通常はnode.jsなどのインストールが必要です。私の場合、CodeKitを利用しているので特になにもインストールせずに利用できました。

stylus用のファイルをstylus/○○.stylとして保存すると、css/○○.cssと書き出されます。それではざっくりと基本機能の紹介します。

Selectors（セレクタ）

stylusはPythonようにインデントベースの記述を行います。

.hoge
	color blue
	font-weight bold

と記述すると以下のようなCSSが出力されます。

.hoge {
  color: #00f;
  font-weight: bold;
}

このように基本的に括弧やセミコロン、コロンなどは省略して記述します。また値などのフォーマットもそろえて出力されます。

セレクタをネストすることで複数のセレクタを出力することができます。

body
	color red
	p
		color black
body {
  color: #f00;
}
body p {
  color: #000;
}

&をつけて記述することで親要素を参照するセレクタを出力できます。

body
	color red
	&.hoge
		color black

body {
  color: #f00;
}
body.hoge {
  color: #000;
}

Variables(変数)

font-size = 14px
body
	font font-size Arial, sans-serif

変数「font-size」を作成し、以降のCSSで利用が可能です。

body {
  font: 14px Arial, sans-serif;
}

コロンを利用すると値の設定と同時に変数の宣言が可能です。

#logo
	width: w = 150px
	margin-left: -(w / 2)
#logo {
  width: 150px;
  margin-left: -75px;
}

これは@を利用して次のように記述することも可能です。

#logo
	width: 150px
	margin-left: -(@width / 2)

次のようにmixinをベースにした拡張も可能です。

position()
	position: arguments
	z-index: 1 unless @z-index
	
#logo
	z-index: 20
	position: absolute
	
#logo2
	position: absolute

この場合、positionが指定されていてz-indexの指定がない場合は「z-index: 1」が出力されます。

#logo {
  z-index: 20;
  position: absolute;
}
#logo2 {
  position: absolute;
  z-index: 1;
}

Interpolation

vendor(prop, args)
	-webkit-{prop} args
	-moz-{prop} args
	{prop} args
	
.hoge
	vendor('box-shadow', 1px 0  0 #CCC)

このようにvendor()を定義しておくとベンダープリフィックスの定義が簡単です。

.hoge {
  -webkit-box-shadow: 1px 0 0 #ccc;
  -moz-box-shadow: 1px 0 0 #ccc;
  box-shadow: 1px 0 0 #ccc;
}

ループ

table
	for row in 1 2 3 4 5
		tr:nth-child({row})
			height: 10px * row

for文を利用することもできます。

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

Mixins

ミックスインで様々な定義が可能。

box-shadow()
	-webkit-box-shadow arguments
	-moz-box-shadow arguments
	box-shadow arguments
	.ie8 &
		border 1px solid arguments[length(arguments) - 1]
	
.box
	box-shadow 1px 1px 3px #eee

次のようにie8用に別のスタイルを定義もできます。

.box {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
.ie8 .box {
  border: 1px solid #eee;
}

演算もできるのでプラスマイナスを変換することも可能です。

pad(n)
 	padding (- n)
body
 	pad(5px)

演算

他にも様々な計算が可能です。

body
  foo: 5px + 10
  foo: 2 ** 8
  foo: 5px * 2
  foo: !!''
  foo: foo and bar and baz
  foo: foo or bar or baz
  foo: 1..5
  foo: 1...5
  foo: 'foo' is a 'string'
  foo: (1 2 3) == (1 2 3)
  foo: (1 2 3) == (1 2)
  foo: ((one 1) (two 2)) == ((one 1) (two 2)) 
  foo: ((one 1) (two 2)) == ((one 1) (two)) 
  foo: ((one 1) (two 2))[0]
  foo: 3 in (1 2 3 4)
body {
  foo: 15px;
  foo: 256;
  foo: 10px;
  foo: false;
  foo: baz;
  foo: foo;
  foo: 1 2 3 4 5;
  foo: 1 2 3 4;
  foo: true;
  foo: true;
  foo: false;
  foo: true;
  foo: false;
  foo: one 1;
  foo: true;
}

演算だけでなく値や文字列に関しても操作可能です。

body
  foo: foo + bar
  foo: 'foo ' + bar
  foo: 'foo ' + 'bar'
  foo: 'foo ' + 5px
  foo: 2s - 500ms
  foo: 5000ms == 5s
  foo: 50deg
body {
  foo: foobar;
  foo: "foo bar";
  foo: "foo bar";
  foo: "foo 5px";
  foo: 1.5s;
  foo: true;
  foo: 50deg;
}

文字列の置き換え

文字列の置き換えも可能。もうCSSというより完全にプログラム言語

body
  foo: '%s / %s' % (5px 10px)
  foo: 'MS:WeirdStuff(opacity=%s)' % 1
  foo: unquote('MS:WeirdStuff(opacity=1)')
body {
  foo: 5px / 10px;
  foo: MS:WeirdStuff(opacity=1);
  foo: MS:WeirdStuff(opacity=1);
}

色に関する操作

色に関しても様々な操作が可能です。

body
  foo: white - 50%
  foo: black + 50%
  foo: #eee - #f00
  foo: #eee - rgba(black,.5)
  foo: #cc0000 + 30deg
body {
  foo: #808080;
  foo: #808080;
  foo: #0ee;
  foo: rgba(238,238,238,0.5);
  foo: #c60;
}

他にも様々な機能があるみたいです。

すごくシンプルに書けて高機能なのですが、シンプルすぎて可読性が落ちる気もします（慣れの問題かも）。

スポンサードリンク

«iOSシミュレータでWebインスペクタが利用できる「iWebInspector」 | メイン | Proxyデバッグソフト「Charles」がすごい»