Sass-インポートディレクティブ

説明

インポートディレクティブは、SASSまたはSCSSファイルをインポートします。インポートするファイル名を直接受け取ります。 SASSにインポートされたすべてのファイルは、単一のCSSファイルに結合されます。 _ @ import_ルールを使用すると、CSSにコンパイルされるものはほとんどありません-

_.css_ファイル拡張子
ファイル名は_http：//_で始まります
ファイル名は_url（）_です
_ @ import_は、メディアクエリで構成されます。

たとえば、次のコードで1つのSASSファイルを作成します-

@import "style.css";
@import "http://finddevguides.com/bar";
@import url(style);
@import "style" screen;

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

上記のコードは、以下に示すようにCSSファイルにコンパイルされます-

@import url(style.css);
@import "http://finddevguides.com/bar";
@import url(style);
@import "style" screen;

以下は、_ @ import_ルールを使用してファイルをインポートする方法です-

パーシャル

パーシャルはSASSまたはSCSSファイルで、名前の先頭にアンダースコアを使用して書き込まれます（_partials.scss）。アンダースコアを使用せずに、部分的なファイル名をSASSファイルにインポートできます。 SASSはCSSファイルをコンパイルしません。アンダースコアを使用することにより、SASSはそれが部分的であり、CSSファイルを生成すべきでないことを理解します。

ネストされた@import

_ @ import_ディレクティブは、_ @ media_ルールおよびCSSルール内に含めることができます。基本レベルのファイルは、インポートされた他のファイルのコンテンツをインポートします。インポートルールは、最初の_ @ import_と同じ場所にネストされます。

たとえば、次のコードで1つのSASSファイルを作成します-

.container {
   background: #ffff;
}

以下に示すように、上記のファイルを次のSASSファイルにインポートします-

h4 {
   @import "example";
}

上記のコードは、以下に示すようにCSSファイルにコンパイルされます-

h4 .container {
   background: #ffff;
}

構文

以下に示すのは、SCSSファイル内のファイルのインポートに使用される構文です-

@import 'stylesheet'

例

次の例は、SCSSファイルでの_ @ import_の使用を示しています-

インポート

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

次に、ファイル__partial.scss_を作成します。

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

次に、ファイル_style.scss_を作成します。

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-

sass --watch C:\ruby\lib\sass\style.scss:style.css

次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを importl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Sassルールとディレクティブ

Sass-directives-import

目次