SCSSの変数をexportしてJavaScript側で読み取ってメソッドで利用する

2020/02/02

SCSS側で:export {}したものを、
JavaScript側でimportし、style.boxWidthの様にアクセスすると使えます。

注意点

exportで読み取った値はstring型です。
数値として利用するには下記の様な感じで変換しましょう。

SCSS

// 変数
$boxMargin: 20px;
$boxWidth: 200px;

// エクスポート
:export {
  boxWidth: $boxWidth;
  boxMargin: $boxMargin;
}

// 普通のスタイル
.header{
  width: $boxWidth;
  margin: $boxMargin;
}

// 変数

$boxMargin: 20px;

$boxWidth: 200px;

// エクスポート

:export {

boxWidth: $boxWidth;

boxMargin: $boxMargin;

}

// 普通のスタイル

.header{

width: $boxWidth;

margin: $boxMargin;

}

JavaScript

import style from './scss/Header.scss';

// pxを取り除いてnumber型に変換
const cutPx = str => Number(str.replace('px', ''));

console.log(cutPx(style.boxWidth)) // 200
console.log(cutPx(style.boxMargin)) // 20

import style from './scss/Header.scss';

// pxを取り除いてnumber型に変換

const cutPx = str => Number(str.replace('px', ''));

console.log(cutPx(style.boxWidth)) // 200

console.log(cutPx(style.boxMargin)) // 20

この様にしてstyle側で指定した幅や余白に応じて何か処理するのはいかがでしょうか。

SCSSの変数をexportしてJavaScript側で読み取ってメソッドで利用する

注意点

SCSS

JavaScript

シェアする