bootstrapのvarが動作していない？

Question

bootstrap4で、ブレイクポイントを取得して変数として使いたいと思っています。
このような書き方をしたのですが、この使い方はあっていますか？

$b-sm: var(--breakpoint-sm);

@debug $b-sm;をしてみましたが、DEBUG: var(--breakpoint-sm)と表示されていて、値がはいってるのか入っていないのかがよくわかりませんが、@media (max-width: $b-sm) { として使っても何も反応しないので、入っていないと思っています。

正しい変数の使い方を教えて欲しいです。

Comments

[maisumakun]

「変数」といっても、2通り考えられます。「CSSの」変数として使いたいのですか？「Sassの」変数として使いたいのですか？

[退会済みユーザー]

sassの変数として使用しようと思っております。

[m.ts10806]

タグを追加してください

Answer 1

このような書き方をしたのですが、この使い方はあっていますか？

間違っています。Sassの変数とCSSの変数をまたぐので、正しく動作しません。

@media (max-width: $b-sm) { として使っても何も反応しないので、

@media (max-width(var(--breakpoint-sm))) {と、CSS変数を直接使うのではだめでしょうか？