【SCSS】SCSS(SASS)で文字をエスケープしたい

前回のCSSグリッドのmixinを作っていた際に、はまったのが文字のエスケープ。

なぜはまったかといえば…

grid-columnやgrid-rowをまとめて指定しようとすると、「/」が入るんですよね。
「/」は変数と変数の間にいれると演算されてしまうので、どうにかして演算させないようにする必要があったのです。

参考にしたのは、海外フォーラムのEscaping percentage character in Sass (SCSS)の記事。

どうやら、#{“~”}を使うことで、文字のエスケープができるということがわかりました。

これによって、前回のmixinの

この部分が無事完成したのです。
これをコンパイルすると、

と、ちゃんと「/」がそのまま表示されてほっと一安心。