sass
部分とインポート
サーチ…
インポート
@importを使うと、ファイルを複数の小さなファイルに分割することができます。これは理にかなっています。なぜなら、スタイルシートの構造を改善し、非常に大きなファイルを避けることができるからです。
例
いくつかのファイルがあるとしましょう。
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
主なスタイルシートapplication.scssは、すべてのファイルをインポートし、独自のスタイルを定義することもできます。
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
@import 'header';書くことができるように.scss拡張子を省略することもでき@import 'header'; @import 'header.scss'代わりに。
これはにつながるapplication.scssすべてのインポートた.scssあなたは、クライアント（ブラウザ）に仕えるコンパイルされたファイルに含まれています。この場合、コンパイルされたファイルはhtmlにインクルードするapplication.cssになります。
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
複数のファイルで作業しているにもかかわらず、1つのファイルのみを提供するので、複数の要求（各ファイルに1つずつ）が不要で、訪問者の読み込み時間が短縮されます。
主な利点
- フォルダと複数のファイルを使用した開発のための構造の改善
- クライアント（ブラウザ）に1つのファイルのみを提供する
部分
スタイルシートのより小さなスニペットを含む部分的なファイルを作成することができます。これにより、CSSをモジュール化し、スタイルシートの構造を改善することができます。部分は、先頭のアンダースコアで指定されたSassファイルです。つまり、 _partial.scssです。アンダースコアはSassに特定のファイルが部分的であり、CSSファイルに生成されないことを知らせます。
Sassパーシャルは@importディレクティブで使用することを意図しています。 @importを使用する場合は、先頭のアンダースコアを省略できます。
例
このような部分構造のファイル構造を持っているとすると
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
main.scssファイルに次のように部分名を含めることができます（この例では、アンダースコアとファイル拡張子は省略されています）。
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';