stylus のここがよい
- gulp と同じく node で動くので、jade 込みで ノールックで環境が整っちゃう。
- 名前空間が便利
- 関数がある、謎の型を覚えればすいすい使える。
型
これがわかんないと、なぜエラーがでるのかわからん。記法が複数あるのもなんとなくわかってくる。
調べ方は、warn()関数を使うか、適当に出力してみてしてみること。
a = typeof("node") // string
b = typeof(12) // unit
d = typeof(30px) // unit
c = typeof(#fff) // rgba
hhh = {a: 123, b: 31231}
typeof(hhh) // object
unit(10) // ''
unit(15in) // 'in'
unit(15%, 'px') // 15px
unit(15%, px) // 15px
css ネイティブで使える値を unitって呼んでるらしい
色はだいたい rgba
文字列はそのままだと string
Hash で囲むと object
unit関数は unit 値から値を取り出したり、つなげたりしてる。
ラベル
記事が少ないのでちょっとだけ stylus 紹介。
a = "width"
b = 400px
div
#{a} 300px
height b
属性指定になり得る一番左や、もじくはセレクタに変数を埋め込む場合は変数展開リテラルが必要のようだ。
リテラルがない場合は、関数として解釈してるようだ。
２番目以降はそのまま書いても適当に型を合わせてくれるが、型によっては入らないので自分で整えておかないといけない。いまのところの解釈ですが。
ハッシュリテラル、関数
Coloring = {}
Coloring = {
"header": #eee
"main": {
"left": #aaa
"content": #ddd
"right": #bbb
}
"footer": #ccc
}
background-color-id-with-color($hash)
for id, value in $hash
if typeof(value) is "rgba"
#{id}
background-color value
background-color-id-with-color(Coloring)
background-color-id-with-color(Coloring.main)
ハッシュリテラルが使える、入れ子にもできる。ただし、同じリテラルで属性を指定するだけのスコープのようにも使えるためややこしい。
キー値は、json のように\"\"を省略できるが、上の理由で若干振る舞いが違う。文字列が属性指定として直接使える場合が考慮されているみたい。ハッシュとして使うならクオートしておく。呼び出しは、ドットチェインでいける、これがいいよね js は。
ここで、htmlの div 構造を名前空間に閉じ込めながらcss を考えたりできるので便利。上のは emmet: #container>#header+(#left+#main+#right)+#footer ってわけです。
関数はおもむろに fun() でインデントを作れば、関数になる。呼び出し時とほとんど見分けがつかないがちゃんと動く。無名関数 a = @(args) {} という記法もあるが振る舞いが違ったのでスルー。
今回はハッシュを受けて、background-color にぶっこんでいく関数を用意。rgba型を確認しながらセレクタを変数展開で作って、動的にcss def をしてくれる。
名前空間と関数
一応下のコードが通っているので、擬似クラスみたいなことできないかやってみたい。。。そうじゃなくても、便利にしたい。
fnfnfn = @() {
width: 400px
}
typeof(fnfnfn) // function
my-func()
div
height: 400px
typeof(my-func) // function
fn-hash = {
"yahoo": fnfnfn
}
typeof(fn-hash) // object
typeof(fn-hash.yahoo) // function
sufn-hash = {
"mero": my-func
}
typeof(sufn-hash) // object
typeof(sufn-hash.mero) // function
Name = {
"space": sufn-hash
}
typeof(Name.space.mero) // function
あれ、かなり使い勝手いいな。試してた時はエラー出まくってたけど、Name.space.mero が通るのはしゅごい。
ベーシックなレイアウト from dotinstall
dotinstall 紹介の基本レイアウト stylus で書き換えてどうなるか実験してみた。
1カラム
global-reset()
Container = {
"header": red
"content": blue
"footer": green
}
background-color-id-with-color(Container)
#container
margin 0 auto
padding 0
width 70%
global-reset() は nib より。
さきほど用意した、backgroun-color-id-with-color 関数のためのハッシュ記法が、html を明示してくれているので、考えやすい、素晴らしい。
まさしく emmet: #container>(#header+#content+#footer) の構成での css。
margin 0 auto で センタリングしてくれるってやつ。
2カラム可変
Container = {
"header": a-color()
"main": {
"left": a-color()
"right": a-color()
}
"footer": a-color()
}
background-color-id-with-color(Container)
background-color-id-with-color(Container.main)
#container
width 70%
#main
overflow hidden
#left
float left
width 200px
#right
margin-left 200px
a-color()は適当な色をもってくる関数、自分定義。
子要素のフロートにも関わらず、子要素が回り込みがおきるのを防ぐのが overflow hidden
margin で左の外側に空白をつくってできあがり。
2カラム固定
Container = {
"header": a-color()
"main": a-color()
"left": a-color()
"right": a-color()
"footer": a-color()
}
background-color-id-with-color(Container)
#continer
width 500px
#main
overflow hidden
#left
float left
width 200px
#right
width 300px
3カラム可変
Container = {
"header": a-color()
"main": a-color()
"left": a-color()
"center": a-color()
"right": a-color()
"footer": a-color()
}
background-color-id-with-color(Container)
#container
width 70%
margin 0 auto
#main
overflow hidden
#left
float left
width 100px
#right
float right
width 100px
#center
margin-left 100px
margin-right 100px
3カラム固定
Container = {
"header": a-color()
"main": {
"left": a-color()
"center": a-color()
"right": a-color()
}
"footer": a-color()
}
background-color-id-with-color(Container)
background-color-id-with-color(Container.main)
#container
margin 0 auto
width 500px
#main
overflow hidden
#left, #center, #right
float left
#left
width 100px
#right
width 100px
#center
width 280px
margin-right 10px
margin-left 10px
色指定を分離するだけで、かなりすっきりしていました。