Sassで他のファイルを読み込む @importとpartial


プロジェクトによるが一般的に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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です