プロジェクトによるが一般的にsassフォルダ以下のscree.sassというファイルで全てのsassファイルをimportし、screen.sassをcssにトランスコンパイルし、これをHTMLのヘッダーで読み込む。
この際、importするファイル名を『冒頭に「_」を付けたもの』にすることで (例：_mixin.sass) 読み込まれたファイルはCSSファイルにトランスコンパイルされない。なぜこうする利点があるかというと、HTMLで読み込み指定されているファイルはscreen.cssだけなのだから、その他のファイル生成されても使いみちがない。使わないのであればコンパイルする必要がない、のでしないほうがいい。
読み込むファイル名の指定
同じディレクトリにある場合は次のように指定する。拡張子(sass)は省略することが出来る。また、パーシャル用のファイル名(_ファイル名)の冒頭の「_」も省略できる。
import "ファイル名" //実際に読み込むのは_ファイル名.sass import "フォルダ名/ファイル名"
@extend
既に読み込まれたスタイルであれば、@extend .クラス名 で援用できる。ここでは_box.sassの中の.boxへのスタイルを、.foxが援用している。
.box width: 100px height: 100px
@import "module/box" @import "module/fox"
.fox @extend .box