例えばCSSで指定してある画像を言語毎に切り替えたい。
言語のごとに各言語のprefixがついた画像にbackground-imageを変更したいようなケース。
.myLabel { background-image: url('/assets/images/label.png'); } .lang-ja { .myLabel { background-image: url('/assets/images/ja-label.png'); } } .lang-fi { .myLabel { background-image: url('/assets/images/fi-label.png'); } }
こんな感じのCSSを書きたいけど、言語数が多くなると超メンドーだし、何回も同じ記述をしたくないので引数に言語名を渡せるmixinを使いたいけど、変数を入れたいのが文字列の途中...
Stylusでmixinの引数を値の文字列に入れる方法。
結論から言えば+
で結合できました。
langLabelMixin(lang) .myLabel background-image: url('/assets/images/' + lang + '-label.png'); .myLabel background-image: url('/assets/images/label.png'); .lang-ja langLabelMixin(ja) .lang-fi langLabelMixin(fi)
{}を使えばプロパティも引数で渡せるらしい
to_rem(prop, font_size) {prop}: unit(font_size, 'em') {prop}: unit(font_size, 'rem') to_rem(font-size, 1.8) /* font-size: 1.8em; font-size: 1.8rem; */
ちょっとすぐには使えそうな場面を思い浮かばないのだけれど、覚えていて損はなさそう。
セレクタも{}を使えば変数で渡せるのでは?
{}
を使えばプロパティ名も引数で渡せるようなので、もしかしたらセレクタも変数にできるのではないかと思い試してみました。
再びbackground-image
のサンプルです。画像に付けるprefixと同じ値をセレクタに付けることができそうです。
langLabelMixin(lang) .lang-{lang} .myLabel background-image: url('/assets/images/' + lang + '-label.png'); .myLabel background-image: url('/assets/images/label.png'); langLabelMixin(ja) langLabelMixin(fi) /* .myLabel { background-image: url('/assets/images/label.png'); } .lang-ja { .myLabel { background-image: url('/assets/images/ja-label.png'); } } .lang-fi { .myLabel { background-image: url('/assets/images/fi-label.png'); } } */
予想通りプロパティ名も変数にする事ができました!
コードブロックを書く時Stylusって指定をしてもSyntax highlightされないけど、sass
って指定すれば結構いい感じに表示できるっぽい!