Sass @import と Partials
- 前のページ Sass 嵌套
- 次のページ Sass @mixin
Sass は CSS コードを乾燥させることができます（DRY、Don't Repeat Yourself、自己を繰り返さない）。
DRY コードを書く方法の一つは、関連するコードを別のファイルに保存することです。
CSS スパンを用いて小さなファイルを作成し、他の Sass ファイルに含めることができます。例えば、このようなファイルは：リセットファイル、変数、色、フォントなどです。
Sass ファイルのインポート
CSS と同様に、Sass も @import 指示。
@import 指示で、1つのファイルの内容を別のファイルに含めることができます。
パフォーマンス問題により、CSS @import 指示には大きな欠点があります；それを呼び出すたびに追加の HTTP リクエストが作成されます。しかし、Sass @import 指示でファイルを CSS に含めます；したがって、実行時に追加の HTTP クリエイトが必要ありません！
Sass インポート语法：
@import filename;
ヒント：ファイルの拡張子を指定する必要はありません。Sass は自動的に .sass や .scss ファイルと仮定します。CSS ファイルもインポートできます。@import 指示でファイルをインポートし、メインファイルでインポートされたファイルで定義された任意の変数やミックスインを使用できます。
メインファイルに任意の数のファイルをインポートできます：
例
@import "variables"; @import "colors"; @import "reset";
例を考えてみましょう：仮に「reset.scss」という名前のリセットファイルがあり、以下のように見えます：
SCSS 语法 (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
今度は「reset.scss」ファイルを「standard.scss」という別のファイルにインポートします。
私たちは以下のように行います：一般的にはファイルの上部に追加 @import 指示；その内容は全体的な範囲を持つことになります：
SCSS 语法 (standard.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
したがって、「standard.css」ファイルが転換された場合、CSS は以下のようになります：
CSS 出力：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass Partials（局部的なファイル）
デフォルトでは、Sass は直接 .scss ファイルを転換します。しかし、ファイルをインポートする際には、ファイルが直接転換される必要はありません。
Sassにはメカニズムがあり、ファイル名がアンダースコアで始まる場合、Sassはそれを翻訳しません。このように名付けられたファイルはSassでpartialと呼ばれます。
したがって、partial Sass ファイルは先頭のアンダースコアで名付けられます：
Sass Partial 语法：
_filename;
以下は、名前が「_colors.scss」の partial Sass ファイルの例です。（このファイルは直接「colors.css」に変換されません）：
例
"_colors.scss":
$myPink: #EE82EE; $myBlue: #4169E1; $myGreen: #8FBC8F;
今、この partial ファイルをインポートするときは、アンダースコアを省略してください。Sassの理解では、ファイル「_colors.scss」をインポートすることになります：
例
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
- 前のページ Sass 嵌套
- 次のページ Sass @mixin
