【Sass】SCSS記法・SASS記法のファイルは混ぜても大丈夫。でも、同名のsassとscssがあったらどうなる？

度々失礼いたします、hakoishiです。

本日は昨日のフリを受けてSassの小ネタ。
SCSS記法・SASS記法のファイルは混ぜても安全！なわけですが、
ならばしかし、styles.sassとstyles.scssが混在してたらどうなるのかと。

地味に気になったのでやってみました。

同名のsass、scssファイルが混在したときの挙動は？

まず、直にcssに変換されるファイル（例としてstyles.sassとstyles.scss）が混在した時の挙動です。

ファイル構成

├ styles.sass
├ styles.scss
└ /core
   └ _test.scss

styles.sass

/* sass */
@import "test"

styles.scss

/* scss */
@import "test";

/core/_test.scss

.test-scss {
    background-color: #CCCCCC;
    border: 1px solid #333333;
}

上記ファイル構成をフォルダごと監視対象とした所、styles.sassに基づいてファイルが生成されました。

styles.css

/* sass */
.test-scss {
    background-color: #cccccc;
    border: 1px solid #333333;
}

しかし、この後にstyles.sass、styles.scssを更新したところ都度コンパイラが走り、更新日時の新しい方に基づいてコンパイルされました。
そして、_test.scssを更新した場合には、常にstyles.sassに基づいてファイルが生成されます。
まとめると、

• 基本的には、hoge.sassに基づいてファイルが生成される
• 監視中にhoge.sassよりhoge.scssの方が更新日時が新しくなったときのみ、hoge.scssに基づいてコンパイルされる。

同名のパーシャルファイルが混在したときの挙動は？

次に、同名のパーシャルファイル（例として_test.sassと_test.scss）が混在した時の挙動です。

ファイル構成

├ styles.scss
└ /core
   ├ _test.sass
   └ _test.scss

styles.scss

@import "test";

/core/_test.sass

.test-sass
  background-color: #CCCCCC
  border: 1px solid #333333

/core/_test.scss

.test-scss {
    width: 200px;
    color: #333333;
    text-align: center;
}

この場合、_test.scssは監視されません。更新してもコンパイラは無反応。
_test.sassのみ監視・コンパイルされます。

styles.css

.test-sass {
  background-color: #cccccc;
  border: 1px solid #333333;
}

両方を監視対象としたい場合は拡張子まで含めればOKです。

styles.scss（変更後）

@import "test.sass";
@import "test.scss";

styles.css（変更後）

.test-sass {
  background-color: #cccccc;
  border: 1px solid #333333;
}

.test-scss {
  width: 200px;
  color: #333333;
  text-align: center;
}

• _hoge.sassのみが監視対象となる。
• 拡張子まで指定すれば、_hoge.sass、_hoge.scssの両方を監視対象とすることも可能。

まとめ

SASS記法、今回初めて使ってみたのですが「color: #CCCCCC;」をコンパイルしようとして「要らないセミコロンあります」って旨のエラーが出たのは新鮮でした。
{}も不要ですし、シンプルな書き方ができて良さそうですね。

メインをSCSSから移すことは現実的には難しそうですが、状況に応じて使い分けることができるといざって時に便利かもしれません。
生のcssでは{}が入れ子になってしまうような場合とか。

最後になりましたが、同名のファイルが存在してしまうような設計は見直すことを強くオススメします。