3
4

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 3 years have passed since last update.

sass変数をcss変数(カスタムプロパティ)に渡す方法

Last updated at Posted at 2021-02-04

##結論

--cssCustomeProperty: #{$sassVariable}

このsassの変数を#{ }で囲むのはcalcとかでも一緒ですね。
参考:SCSSの変数と、CSS3のcalc()を併用するには
##用例

/* sass変数の定義 */
$color_primary: #f00000;

/* 疑似クラス:rootでcss変数の定義 */
:root {
  --color-primary: #{$color_primary};
}

/* 定義済みcss変数の利用 */
body {
  color: var(--color-primary);
}

##補足:sass関数にcss変数を入れるのは出来ない

body {
  color : darken(var(--color-primary), 10%);
}

/* 上記はエラーになる */

無理難題を言っているのかもしれないが、この辺りの融通が利けば助かるのに、と思うときが稀にある。

3
4
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
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?