2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

mix-inで引数をプロパティ名に使いたい時の書き方

Last updated at Posted at 2014-02-28

例: em, remのオールドブラウザ対応

font-size: 1.8em;
font-size: 1.8rem;

新しいブラウザではremで上書きしつつ、レガシーブラウザではemを使う。
この場合、font-size用のmix-inを用意してもいいが、emは色んなサイズ指定になるべく汎用的にしたいとおもう。

しかしそのまま書いても、以下のような結果になってしまう。

// bad
to_rem(prop, font_size)
  prop: unit(font_size, 'em')
  prop: unit(font_size, 'rem')

to_rem(font-size, 1.8)
/*
  prop: 1.8em;
  prop: 1.8rem;
*/

公式ドキュメントにも、これについての記述はないっぽいので、諦めてnib(sassでいうCompass的な存在っぽい)のリポジトリ https://github.com/visionmedia/nib をあさる。

// good
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;
*/

やったぜ。

セレクタ文字列と変数が隣接してる場合とかでも、{}で囲むといいかんじに展開してくれるかんじです。いかにもマクロ的ですね。
nibは色々と機能を使いこなしてる感じなので、ドキュメント読んでもわかんないところがあったら読むと参考になります。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?