はじめに
皆さんはcssメタ言語は何を使っていますか？
主流は相変わらずsass+compassですね。とあるきっかけでstylusに切り替えたところ、こちらの方が使い勝手が良く肩入れする様になりました。で、周囲で使っている人が少なく日本語情報も少ないので、記事を書くことにしました。
ちなみに筆者はlessを使用したことはありませんし、sassも最近のバージョンは弄ってないので、他言語の方が良いとか、そんなもの他でも出来るというツッコミあればいただけると嬉しいです。インスール方法とか他CSSに関するタスクランナーなどの設定は割愛。
透過的mixinが良い
stylusを使っていて一番良いと感じたところが、透過的mixinです。予めmixinを定義しておけば、cssにプロパティがある様に扱えるので「こんなプロパティがあったらなぁ」という想いが解消されます。
rect(w=0,h=0,l=0,t=0)
width w
height h
left l
top t
@import '_mixins'
.box
rect 10px 20px 30px 40px
/* yield */
.box {
width: 10px;
height: 20px;
left: 30px;
top: 40px;
}
sassの場合、mixinを呼び出す時は明示的に@includeをつけなければいけませんが、stylusはこれを省略することが出来るため、あたかもそのプロパティが元からある様に振る舞えます。但しその恩恵から、そもそものプロパティさえもオーバーライドしてしまうので、mixinの命名には注意が必要です。
インデントのネストがちょっとね…という時は
sassが支持される理由として「CSS本来の書式に近い」といった点があるかと思います。stylusはsassと同じ様に書くことが出来ます。またlessと同じ様に書くことも出来ます。なんなら混合しても大丈夫。コロンやセミコロンの付与も自由。
@import '_mixins'
.box {
rect: 10px 20px 30px 40px;
&.yellow{
background-color: #0ff;
}
}
/* yield */
.box {
width: 10px;
height: 20px;
left: 30px;
top: 40px;
}
.box.yellow {
background-color: #ff0;
}
とにかく自由なので、プロジェクトに応じてガイドラインが必要かと。
単位指定を省略するmixin
単位指定はpxが多いため、ただの数値指定はpxになる様にmixinをネストして定義しておきます。
_px(v)
if type(v) == 'unit'
if unit(v) == ''
unit(v, 'px')
else
v
else
v
rect(w=0,h=0,l=0,t=0)
width _px(w)
height _px(h)
left _px(l)
top _px(t)
こういう定義にしておけば、%とかvwも指定さえすれば適応されるので問題なし。
@import '_mixins'
.box
rect 10 20 30% 40vw
/* yield */
.box {
width: 10px;
height: 20px;
left: 30%;
top: 40vw;
}
ショートハンド化してEmmet風に
オレオレmixinの究極系。Emmetばりに短いタイプ量で済むため、作業効率が上がります。コードを共有する場合は意味不明になるかも。
_px(v)
if type(v) == 'unit'
if unit(v) == ''
unit(v, 'px')
else
v
else
v
rect(w=0,h=0,l=0,t=0)
width _px(w)
height _px(h)
left _px(l)
top _px(t)
re(w=0,h=0,l=0,t=0)
rect w h l t
@import '_mixins'
.box
re 10 20 30 40