scssで、変数宣言用のファイルを用意し、そこの変数を他のscssファイルから参照したい。

Question

質問を閲覧いただきましてありがとうございます。

今回やりたいこととして、scssで@mixinで定義したstyleを@includeする要領で、変数を定義してそれをincludeしたいのですが、それは可能なのでしょうか？

具体的には、変数に定義したカラーコードを使いまわしたいです。

現在は各scssファイルの頭に

$color1: #000000;
$color2: #ffffff;

このような宣言をしていますが、とても面倒かつ管理もしづらいので、色の定義を１つのファイルでまとめて行いたいです。

もし良い方法を知っている方がいらっしゃいましたら、是非ご助力いただけると助かります。

######試したこと

@mixin colorpallet {
    $color1: #000000;
    $color2: #ffffff;
}

@include colorpallet;

body {
    background: $color1;
}

Answer 1

「変数自体が多量にあるのでスコープなどを管理しないといけない」ような状況でなければ、変数定義のファイルでは、ルールの中ではなくグローバルに変数定義を行って、使う側ではそれを@importすれば、1つのファイルに書いたように変数を使えます。

Bootstrapでも、変数定義のscssファイルではグローバルに変数定義を行っています。

Comments

[Nerf.this]

@importは複数ファイルを１つのファイルに纏める為に何気なく使っていたのですが、確かに言われてみれば…という感じでした（笑）
無事解決出来ました。ありがとうございます！

Answer 2

@importではだめですか？

colorpallet.scss

$color1: #000000;
$color2: #ffffff;

@import "colorpallet.scss";

body {
    background: $color1;
}

↓

body {
    background: #000000;
}

Comments

[Nerf.this]

ありがとうございます！@importを使うことで無事解決出来ました！