sass-globbingでSassファイルをお手軽管理

  • 63
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

皆さんは、1ヶ月間用コンタクトレンズを2週間用だと勘違いして使ってた経験ありませんか?ぼくは、あります(´Д⊂ヽ

さて、今日はSassのファイル構成について考えてみたいと思います。Sassを使えば@importを使ってお手軽にファイルをモジュール管理できますね。ということで、私が作ったCSSフレームワークMapleでも下記のようなファイル構成で管理しています。

├── css
│   ├── maple.css
│   └── sass
│       ├── maple.scss
│       ├── _core.scss
│       ├── _modules.scss
│       ├── core
│       │   ├── _base.scss
│       │   ├── _helper.scss
│       │   ├── _layout.scss
│       │   ├── _reset.scss
│       │   └── _settings.scss
│       ├── modules
│       │   ├── _bars.scss
│       │   ├── _boxes.scss
│       │   ├── _buttons.scss
│       │   ├── _forms.scss
│       │   ├── _headlines.scss
│       │   ├── _listviews.scss
│       │   └── _misc.scss
│       └── vendors
│           └── _myfont.scss

大枠としては全体に共通する設定をcoreに、各コンポーネント部品はmodulesに分けていることです。あとは、vendiorsに外部CSSライブラリとか必要であればぶち込んでおきましょう。

ディレクトリ分け自体はお好きな様にやってくれればよいのですが、問題はそれらを読み込む処理ですYO!

maple.scss
//-------------------------------------//
//  Final output CSS file
//-------------------------------------//

//  Compass settings
//-------------------------------------
$experimental-support-for-opera: false;
$experimental-support-for-mozilla: false;
$experimental-support-for-microsoft: false;
@import "compass";


//  @import files
//-------------------------------------
@import "core";
@import "modules";

大元のmaple.scssでまず、_core.scss_modules.scssファイルを読み込んでいます。

_core.scss
//-------------------------------------//
//  Core files
//-------------------------------------//

@import "core/settings";
@import "core/reset";
@import "core/base";
@import "core/helper";
@import "core/layout";
_modules.scss
//-------------------------------------//
//  Module files
//-------------------------------------//

@import "modules/headings";
@import "modules/listviews";
@import "modules/buttons";
@import "modules/bars";
@import "modules/boxes";
@import "modules/forms";
@import "modules/misc";

_core.scss_modules.scssファイルでは各ディレクトリ配下のファイルをそれぞれ読み込んでいます。

これ、すっごく ('A')マンドクセ くないですかね?例えばmodulesのファイルが増えるたびに追加の記述をしなければならないし、これが何十ファイルとかあるとだいぶしんどいです。また、必要でなくなったmodulesファイルを削除するには、ファイルを削除して@importの記述も削除しなければなりません。じゃないと、『ファイルが見つかりませんよー』ってコンパイルエラーになる ('A')マンドクセ

そもそも、なぜわざわざ読みこむだけのパーシャルファイル作んなきゃいけないのか、どうせなら、最初の段階で以下のように読み込ませたいですよね?

maple.scss
//  @import files
//-------------------------------------
@import "core/*";
@import "modules/*";

いわゆるGlobっていうの?Sassでも使ってみたいわけですよ。

Import all files from a folder
Same idea, pushing things further would be to be able to import all files from a folder at once. This is also called "Sass globbing" and currently exists as a Sass plugin by Chris Eppstein himself (I think this will be merged with Sass in 4.0).

どうやら、Sass v4.0で採用する予定みたいだけど、待てない。

ということで、sass-globbingを使ってみる。どうやらこれが4.0でマージされる予定みたい。

使い方は簡単。

$ gem install sass-globbing

gemをインストールして、config.rbに下記のように記述すればSassでGlobが使えるようになるよ。

config.rb
require 'sass-globbing'

そうゆうことでめでたくSassでGlobを使えたわけですけど、ファイルに依存関係のあるもの(例えばcore_setting.scssなどは設定変数が記述されているため、このファイルが一番最初に読み込まなければならない)をGlobで読み込んじゃうとエラーになっちゃうので気をつけてくださいまし。