Sassでimportを行う際は1ファイル毎に指定する必要があります。
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@charset "UTF-8"; @import "compass"; @import "mixin"; @import "utility"; @import "foundation/base"; @import "foundation/reset"; @import "layout/container"; @import "layout/header"; @import "layout/main"; @import "layout/aside"; @import "layout/footer"; @import "module/hdg"; @import "module/texts"; @import "module/lists"; @import "module/medias"; @import "module/boxCol"; @import "module/tables"; @import "module/tab"; @import "module/btns"; @import "module/line"; @import "module/movie"; |
これだとモジュールが追加になった時等に都度importの記述を追加する必要があり手間になってしまいます。
以下のように指定できると便利ですよね。
1 2 3 4 5 6 7 8 |
@charset "UTF-8"; @import "compass"; @import "mixin"; @import "utility"; @import "foundation/*"; @import "layout/*"; @import "module/*"; |
こちらを実現するために「sass-globbing」というツールを使用します。
インストール方法
ターミナルを起動して、以下のコマンドを使ってインストール。
1 |
$sudo gem install sass-globbing |
Compassを使う場合はconfig.rbに以下を追記
1 |
require 'sass-globbing' |
以上でOK
参考:
Automatic Sass Imports with Sass Globbing | Fuse Interactive | Drupal Web Design and Development in Vancouver
sass-globbingでSassファイルをお手軽管理 – Qiita