# Dart Sassでファイルを分割して管理する方法｜Dart Sass入門

URL: https://webrandum.net/dart-sass-basic-2/
公開日: 2022-08-09
更新日: 2022-08-09
カテゴリー: コーディング
タグ: Sass
出典: Webrandum（著者: サイトウ マサカズ）

Sassを使うメリットの1つに「ファイルの分割」が挙げられます。

普通にCSSで書く場合、`style.css`のような1つのファイルに書いていくと、気がつけば数千行のコードになってしまい、縦の移動がかなり面倒になってしまいます。

かといって細かくCSSを分けたりすると、どのページでどのCSSを読み込んでいるのか管理がややこしくなります。

また、CSSファイルを追加する度に関連ページのHTMLを修正する必要が出てきてしまうので、気軽に細かくファイルを分割できません。

もちろんルールを決めておけば問題なくなりますし、余計なCSSを読み込まなくて済むので良い方法ではありますが、Sassであればファイルを分割して最終的に1つのCSSファイルにまとめられるので、気軽に細かくファイルを分割していけます。

今回はDart Sassでのファイル分割方法についてまとめておきます。

## Dart Sassのファイル分割方法

### ファイルの分割

今回は「`style.scss`」ファイルに、分割したファイルをどんどん読み込んでいくのを想定して、下記のようなフォルダ構成を用意しました。

![分割するファイル構成](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-4.png)

分割して、他のファイルで読み込むだけのファイルは、名前の先頭にアンダースコア（`_`）を入力します。

先頭にアンダースコアがついていると、そのファイルはコンパイルされなくなるので余計なCSSが生成されずに済みます。

```
# button.cssにコンパイルされる
button.scss

# コンパイルされない（他ファイルからの読み込み専用ファイルになる）
_button.scss
```

この機能を「パーシャル（partial）」と呼びます。

逆にアンダースコアを付けていないと、分割した分すべてのCSSが生成されてしまうので注意が必要です。

### 分割したファイルの読み込み

今度は分割したファイルの読み込みです。

読み込み元となるファイル（今回の場合は`style.scss`）を開いて、`@use`のあとに読み込みたいファイルのパスを指定すると読み込めます。

```
style.scss// base
@use "base/layout";
@use "base/mixin";
@use "base/reset";
@use "base/variable";

// common
@use "common/footer";
@use "common/header";
@use "common/main";

// module
@use "common/button";
@use "common/card";
@use "common/input";
@use "common/modal";
@use "common/pagination";
@use "common/table";

// page
@use "page/about";
@use "page/top";
```

パーチャルを使っていたとしても先頭のアンダースコアは不要で、`.scss`の拡張子も不要です。

#### @importは古い書き方

Sassに関する記事を見ていると、ファイルの読み込みは`@import`で書かれているのを見かけるかもしれません。

これはLibSassなどの古いSassの書き方です。

Dart Sassでは`@import`は動かないので注意が必要ですし、逆にLibSassを使うときは`@use`が使えません。

Dart SassとLibSassの違いなど、細かいことは過去に記事にしているので、そちらをご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/06/eyecatch-18.png)「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめhttps://webrandum.net/sass-compile-typeDart SassやLibSass、Ruby Sassなど、Sassにもいくつか種類があります。2022年7月現時点ではDart Sassが主流ですが、それ以外との具体的な違いに関してまとめておきます。Sassの種類「Sassの種類」といっても2つの側面があります。1つは「記法」で書き方の問題です。2つ目はSassをコンパイルしている「言語」の問題です。最近は記法の方は「SCSS記法」が一般的になっているので、現在Sassの種類に関する話をするときは言語を指す場合が多いです。記法記法に関しては「SASS記法（全て大文字になるので注意）」と「SCSS記法」の2種類しか...](https://webrandum.net/sass-compile-type)

### 2つ以上前のファイルで定義されている変数を利用したい場合

少しややこしい話になるのですが、Sassでは変数をファイル内で定義して使えます。

別ファイルで定義している変数を使いたい場合に、定義されているファイルを直接読み込んで使う場合は`@use`で問題ありません。

しかし、読み込むファイル先でさらに別ファイルを読み込んでいて、そこで変数が定義されている変数を使いたい場合は、`@use`ではその変数は利用できません。

2つ以上前のファイルで定義されている変数を利用したい場合は`@forward`というものを使います。

```
@forward "base/button";
```