Sass の使い方（その３：ファイル分割）

読み込まれる側のファイルのファイルは、ファイル名の先頭に "_"（アンダーバー）を付けた名前になります。 例えば、"_partial.scss" のようになります。

このファイル名の先頭のアンダーバーは、ファイルが部分的なファイルにすぎず、CSSファイルに生成されないという意味があります。 つまり、このファイル単体では変換されないということです。 別のファイルから読み込まれて初めてその内容が変換されることになります。

読み込む側のファイルでは、どのファイルを読み込むかを指定する必要があります。どのファイルを読み込むかを指定するには @use を使います。 読み込まれる側のファイルには、ファイル名の先頭にアンダーバーを付けるというルールがありましたが、 読み込む側のファイルで指定する際には、そのファイル名の先頭のアンダーバーや、ファイルの拡張子は付けず、その名前だけを指定します。

Sass のファイルの拡張子は .sass と .scss の２種類ありますが、どちらのファイルを読み込むかは自動的に解決されるので、拡張子を指定する必要はないということです。 ちなみに同じ場所に同じ名前で .sass と .scss ファイルの２ファイルあった場合はエラーとなります。

/* _partial.scss もしくは、_partial.sass を読み込む */
@use "partial";

読み込まれる側のファイルが、別のディレクトリにある場合でも、アンダーバーと拡張子は除いた形で指定します。

/* foo/bar/_partial.scss もしくは、foo/bar/_partial.sass を読み込む */
@use "foo/bar/partial";

a {
	display: block;
	padding: 6px 12px;
}

a {
	display: block;
	padding: 6px 12px;
}

div {
	margin: 0;
	padding: 0;
}

@use "partial";

div {
	margin: 0;
	padding: 0;
}

読み込まれる側のファイルに記載された変数やミックスインなどを、読み込み側のファイルでも使用することもできます。 その場合、@use のファイル名（名前空間名）をプレフィックスとして . でつなげて指定します。

$color: red;

div {
	color: red;
}

@use "partial";

div {
	color: partial.$color;
}

読み込まれる側のファイルに記載された変数やミックスインなどを、読み込み側のファイルでは使用できないようにしたい場合があります。 その場合は、定義する際の名前を - もしくは _ で始めると、その要素はそのファイル内でのみしか使用できなくなります。

$color: red;
$-border-color: green;

a {
	color: $color;
	border-color: $-border-color;
}

a {
	color: red;
	border-color: green;
}

div {
	color: red;
}

@use "partial";

div {
	color: partial.$color;
}

@use で読み込まれるファイルは、名前空間を持っています。 この名前空間があることで、別のファイルの変数などを指定する際に、どのファイルのものなのか判別できるようになります。 デフォルトでは、読み込んだファイル名がそのまま名前空間名となるのですが、 ディレクトリが異なる同じ名前のファイルを読み込もうとした場合、同じ名前空間名になってしまうため、名前空間名を変更する必要が出てきます。 名前空間名を変更するには、@use を使用する際に as で別名を指定します。

$color: red;

a {
	color: red;
}

div {
	color: blue;
}

$color: blue;

@use "foo/partial" as foo_partial;
@use "bar/partial" as bar_partial;

a {
	color: foo_partial.$color;
}

div {
	color: bar_partial.$color;
}

読み込まれる側のファイルに定義している変数に !default キーワードを付けておくと、 読み込み側のファイルで @use で読み込む際に with を付けて指定することで、その値を書き換えることができます。 !default が付いていない変数は、読み込み側のファイルでは書き換えられません。 これは、読み込まれる側のファイルを変更することなくライブラリのように使いまわしたい場合などに便利です。

$color: red !default;
$border-color: green !default;
$border-radius: 0.1rem;

a {
	color: $color;
	border-color: $border-color;
	border-radius: $border-radius;
}

a {
	color: blue;
	border-color: aqua;
	border-radius: 0.1rem;
}

div {
	color: blue;
	border-color: aqua;
	border-radius: 0.1rem;
}

@use "partial" with (
	$color: blue,
	$border-color: aqua,
);

div {
	color: partial.$color;
	border-color: partial.$border-color;
	border-radius: partial.$border-radius;
}

名前空間名は短くて単純な名前の方がわかりやすいですが、階層構造にした場合は、どのファイルの値なのかが逆にわかりづらくなるかもしれません。 そこで、@forward で親ファイルに転送される名前空間名にプレフィックスを追加するオプションがあります。 プレフィックスを追加するには、@forward を使用する際に as <prefix>-* の形式で指定できます。

$color: red;

div {
	color: red;
}

@forward "grandchild" as grandchild-*;

@use "child";

div {
	color: child.$grandchild-color;
}

孫ファイルにある全ての変数やミックスインなどを、親ファイルに公開したくない場合があります。 デフォルトでは全て公開されているのですが、一部だけを公開にしたり、一部だけを非公開にしたりするように指定することができます。

一部だけを公開にする場合は、@forward を使用する際に show <members...> の形式で指定できます。

一部だけを非公開にする場合は、@forward を使用する際に hide <members...> の形式で指定できます。

どちらの形式でも、変数やミックスインなどの名前を ,（カンマ）区切りで指定します。

$color: red;
$border-color: green;
$background-color: blue;

div {
	color: red;
	border-color: green;
}

// 孫ファイルのうち、
// $color と $border-color だけが使えるように制限
// $background-color は使えない

@forward "grandchild" show $color, $border-color;

@use "child";

div {
	color: child.$color;
	border-color: child.$border-color;
}

@use と同じように、!default キーワードが付いている変数は、@forward を使用する際に with を付けて指定することで、その値を書き換えることができます。

$color: red !default;
$border-color: green !default;
$border-radius: 0.1rem;

a {
	color: $color;
	border-color: $border-color;
	border-radius: $border-radius;
}

a {
	color: orange;
	border-color: yellow;
	border-radius: 0.1rem;
}

div {
	color: orange;
	border-color: yellow;
	border-radius: 0.1rem;
}

@forward "grandchild" with (
	$color: green !default,
	$border-color: yellow,
);

@use "child" with (
	$color: orange,
);

div {
	color: child.$color;
	border-color: child.$border-color;
	border-radius: child.$border-radius;
}