SASSの研究ノート(3)

1.インポートSASSファイル

ファイルには、追加のCSS CSSファイルをインポートすることができ、特別なCSS珍しい特性、すなわち@import規則は、あります。しかし、結果だけ@importするために実行され、ブラウザがページが非常にゆっくりとアップロードさせ、追加のCSSファイルを、ダウンロードして行きます。

そこSASSの@importルールでもあり、その差はSASSの@import規則は、CSSファイルを生成するときにインポートされた関連ファイルを入れてくる、です。これは、すべてのスタイルは、追加のダウンロード要求を起動することなく、同じCSSファイルにグループ化されていることを意味します。さらに、すべての変数は、ミキサーで定義され、文書内に導入される(セクション2.5を参照)インポートファイルに使用することができます。

SASS @import規則を使用すると、インポートファイルの完全な名前を指定する必要はありません。あなたは(下記参照).sassまたは.scssファイルの接尾辞を省略することができます。このように、スタイルシートを変更しないという前提の下で、あなたは自由にあなたがインポートまたは他の誰かによって書かれているSASSスタイルファイルの構文を変更することができ、簡単にSASSとSCSS構文を切り替えます。例えば、@インポート「サイドバー」;このコマンドは、現在のスタイルシートsidebar.scssファイル内のスタイルのすべてに追加されます。

2.ファイルのSASSの一部を使用して

複数のファイル間で@importスタイルを通じてSASSは、あなたは通常、わずか数cssファイルを生成したいときに。サスは、それらのファイルに特別に書かれた@importコマンドのために、対応する個別のCSSファイル、ローカルファイルと呼ばれるようにSASSファイルを生成する必要はありません。この点で、SASSは、それらのファイルに名前を付けるために、特別な規則があります。

この大会、ファイルのSASS部分のファイル名は、アンダースコアで始まること。このように、サスは、この文書のみをインポートとして、コンパイル時に個別のCSSファイル出力をコンパイルしません。あなたがローカルファイルを@importすると、また、ファイル名の先頭が省略されている下線のファイルの完全な名前を書き込むことはできません。たとえば、あなたがテーマ/ _night-sky.scssローカルファイル変数をインポートする、あなただけのスタイルシートで@import「テーマ/夜空」を記述する必要があります;。

ローカルファイルは、複数の異なるファイルによって参照することができます。一方で、いくつかのスタイルは、非常に有用である、複数のプロジェクトに複数のページを使用する必要があります。この場合は、時々インポートスタイルを変更するスタイルシートに少しを必要とする、SASSは、デフォルトの変数の値である、ちょうどこの問題を解決するための機能を持っています。

3.デフォルトの変数値

通常の状況で、あなたは最後のものだけが有効と宣言、繰り返し変数を宣言し、それが価値のフロントをカバーします。例えば:

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

上記の例では、ハイパーリンクの色が赤に設定されます。これは、あなたが望む結果ではないかもしれない、あなたはライブラリをインポートするSASSファイル@importを経由して他の人かもしれ書いた場合、インポートする可能性のある特定の値は、ライブラリファイルをSASS変更カスタマイズすることができます。SASS!デフォルトのラベルの使用は、この目的を達成することができます。!そうでない場合は、デフォルト値を使用して、CSSプロパティは、変数は代入を宣言されている場合:!意味、変数のデフォルトことを除いて、重要なラベルをアンチテーゼのようにそれは多くのであり、それは、その文を値。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

上記の例では、あなたのSASSローカルファイルをインポートする前に、ユーザが宣言している場合、\(fancybox-幅の変数、\するために、あなたのローカルファイルを) fancybox幅400ピクセルの割り当てが無効です。400ピクセルにあなたは、このような文を実行しない場合は、$ fancybox幅のデフォルト値。

おすすめ

転載: www.cnblogs.com/heson/p/11263127.html