Stylus プロパティ名に変数を使って一緒に"(ダブルコーテーション)や半角スペースを出力したい

例えばこんな感じのCSSを出力したくて

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'webfont-icon' !important;
  ... 
}

icon- の部分をを変数にしたい様な時。
変数と一緒に"(ダブルコーテーション)や(半角スペース)を出力させるのが結構落とし穴でした。

Stylusでプロパティ名に変数を使う場合は .color-{$type} の様に{ で変数名を囲ってあげればOKです。(※ Stylusで変数を定義する際に先頭に$は不要ですが、個人的に見やすいので変数名は$始まりにしています。)
[参照] Stylus プロパティの値に変数名を変数で指定したい。 - かもメモ

NG集

変数をそのまま書く

$prefix   = 'icon-'
[class^="{$prefix}"], [class*=" {$prefix}"]
  font-family: 'webfont-icon' !important;

👇

[class^="{$prefix}"],
[class*=" {$prefix}"] {
  font-family: 'webfont-icon' !important;
}

なぜか変数名がそのまま表示される...

一部を文字列結合にしてみる

[class^=" + {$prefix} + "], [class*=" + {$prefix} + "]
  font-family: 'webfont-icon' !important;

👇

[class^=" + {$prefix} + "],
[class*=" + {$prefix} + "] {
  font-family: 'webfont-icon' !important;
}

`"' で囲まれた範囲が、そのまま表示されるっぽい？

プロパティ名全体を文字列結合にしてみる

'[class^="' + {$prefix} + '"]', '[class*=" ' + {$prefix} + '"]'
  font-family: 'webfont-icon' !important;

👇

Plumber found unhandled error:
 ParseError in plugin 'gulp-stylus'

コンパイルエラー

全体が文字列になるのが良くない？

['class^="' + {$prefix} + '"'], ['class*=" '+ {$prefix} + '"']
  font-family: 'webfont-icon' !important;

👇

['class^="'+ icon- + '"'],
['class*=" '+ icon- + '"'] {
  font-family: 'webfont-icon' !important;
}

違うそうじゃない。

{ の中に" を書いてみる

[class^={"$prefix"}], [class*={" $prefix"}]
  font-family: 'webfont-icon' !important;

👇

[class^=$prefix],
[class*= $prefix] {
  font-family: 'webfont-icon' !important;
}

半角スペースは表示されたので惜しい気がする？

{ の中に書いた"を\エスケープしてみる

[class^={\"$prefix\"}], [class*={\" $prefix\"}]
  font-family: 'webfont-icon' !important;

👇

[class^="],
[class*="] {
  font-family: 'webfont-icon' !important;
}

違うそうじゃない。。。

{ の中に書いた"を\(エスケープ)して文字列結合にしてみる

[class^={\" + $prefix + \"}], [class*={\"  + $prefix + \"}]
  font-family: 'webfont-icon' !important;

👇

[class^="icon-"],
[class*="icon-"] {
  font-family: 'webfont-icon' !important;
}

必要な半角スペースが消えてしまっただけで、非常に惜しい!!

{の中の半角スペースも\(エスケープ)して文字列結合にしてみる

[class^={\" + $prefix + \"}], [class*={\"\ + $prefix + \"}]
  font-family: 'webfont-icon' !important;

👇

[class^="icon-"],
[class*="] {
  font-family: 'webfont-icon' !important;
}

ちょっ、おま……(´・ω・`)

[class^={\" + $prefix + \"}], [class*={\"\s + $prefix + \"}]
  font-family: 'webfont-icon' !important;

※ コレでも同じ 👇

[class^="icon-"],
[class*="] {
  font-family: 'webfont-icon' !important;
}

うまくいく方法

1. 別の変数を作ってしまう

$prefix   = 'icon-'

$str1 = '"' + $prefix + '"'
$str2 = '" ' + $prefix + '"'
[class^={$str1}], [class^={$str2}]
  font-family: 'webfont-icon' !important

👇 出力されるCSS

[class^="icon-"],
[class^=" icon-"] {
  font-family: 'webfont-icon' !important;
}

あまりイケてませんが目的は果たせます。

2. { } の中で文字列結合する方法

{ の中での計算は許されているようなので、下記のように囲ってしまえばOKです。

$prefix   = 'icon-'
{'[class^="' + $prefix + '"]'}, {'[class*=" ' + $prefix + '"]'}
  font-family: 'webfont-icon' !important;

$prefix   = 'icon-'
[class^={'"' + $prefix + '"'}], [class*={'" ' + $prefix + '"'}]
  font-family: 'webfont-icon' !important;

👇 出力されるCSS

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'webfont-icon' !important;
}

3. \(エスケープ)を使う方法

プロパティ名内に変数があるとき、\(エスケープ)があるとその直後の文字列はそのまま表示されるようです。

$prefix   = 'icon-'

[class^=\"{$prefix}\"], [class*=\"\ {$prefix}\"]
  font-family: 'webfont-icon' !important

👇 出力されるCSS

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'webfont-icon' !important;
}

これはイイ感じです！
半角スペースの前にも\を付けるのがポイントです。エスケープされてないと半角スペースが消えます(´・ω・`)
　

Stylusでプロパティ名の文字列展開を行う時"やなど消えてほしくない文字の前には\を書くか、{}の中で計算させると覚えておけば良さそうです！

---

ipad pro アップルペンシル用クリップ りんごのへた for Apple Pencil キャップ カバー ホルダー等に