Sass変数をJSファイルでimportする

2020-02-15

:export はありがたい。けど書くのが面倒。。。scssに変数定義したらそのまま自動で exportしてくれる便利なライブラリないかなー

Sassで定義した変数をそのままJSでも読み込みたいってニーズ。たしかにたまにやりたくなる。元ツイートに載ってる記事によると、 :export セレクタ中のプロパティが変数としてJSで読み込めるようになるらしい。

// style.scss
$red: #ff0000;

:export {
  red: $red;
}

import { red } from './style.scss';

自分はこのツイート見るまで :export の存在を知らなかった。こういう場面では、自分は次のコードのようにSass変数をCSS変数に展開して対応してた。

$red: #ff0000;
$green: #00ff00;
$blue: #0000ff;

:root {
  --color-red: #{$red};
  --color-green: #{$green};
  --color-blue: #{$blue};
}

こうするとCSS in JSでも var を使って変数が流用できる。

mixin使ってまとめるとこう。

$colors: (
  red: #ff0000,
  green: #00ff00,
  blue: #0000ff
);

@mixin expandVars($vars) {
  @each $k, $v in $vars {
    --color-#{$k}: #{$v};
  }
}

:root {
  @include expandVars($colors);
}

ただいくつか制約があって、

JSでimportできるわけではない＝ JSでいじることはできない
CSS Variables自体の制約

など、必ずしも変数に定義した値が流用できない不便さはあった。

そこでこれを :export キーワードに流用してみる。

// style.scss
$colors: (
  red: #ff0000,
  green: #00ff00,
  blue: #0000ff,
);

@mixin expandVars($vars) {
  @each $n, $v in $vars {
    #{$n}: #{$v};
  }
}

:export {
  @include expandVars($colors);
}

import { red, green, blue } from './style.scss';

これでJSからもCSSが読み込めるようになる。 CSS in JSに渡せたり、chroma.jsみたいに色操作系のライブラリに渡せたりするので、要件次第ではこちらの書き方も便利そう。

#Sass

Sass変数をJSファイルでimportする

Share