Sass-output-style

Sass-出力スタイル

この章では、* SASS出力スタイル*について学習します。 SASSが生成するCSSファイルは、ドキュメントの構造を反映したデフォルトのCSSスタイルで構成されています。 デフォルトのCSSスタイルは適切ですが、すべての状況に適しているとは限りません。一方、SASSは他の多くのスタイルをサポートしています。

次の異なる出力スタイルをサポートしています-

：ネスト

ネストされたスタイルは、SASSのデフォルトのスタイルです。 このスタイル設定方法は、大きなCSSファイルを扱う場合に非常に便利です。 これにより、ファイルの構造が読みやすくなり、理解しやすくなります。 すべてのプロパティには独自の行があり、各ルールのインデントは、ネストの深さに基づいています。

たとえば、次のようにSASSファイルにコードをネストできます-

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

：拡張

拡張タイプのCSSスタイルでは、各プロパティとルールに独自の行があります。 ネストされたCSSスタイルと比較して、より多くのスペースが必要です。 [ルール]セクションはプロパティで構成されます。プロパティはすべてルール内で使用されますが、ルールはインデントに従いません。

たとえば、次のようにSASSファイルのコードを展開できます-

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

：コンパクト

コンパクトなCSSスタイルは、ExpandedとNestedよりも競争力があります。 プロパティではなくセレクターに主に焦点を当てています。 各セレクタは1行を使用し、そのプロパティも同じ行に配置されます。 ネストされたルールは、改行なしで隣り合わせに配置され、ルールの個別のグループはそれらの間に改行を入れます。

たとえば、次のようにSASSファイルのコードを圧縮できます-

#first {
   background-color: #00FFFF; color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline; font-size: 5em; background-color: #FFFF00;
}

：圧縮

圧縮されたCSSスタイルは、上記で説明した他のすべてのスタイルと比較して、最小限のスペースを取ります。 ファイルの末尾にあるセレクターと改行のみを分離するために空白を提供します。 このスタイリングの方法は混乱を招き、簡単に読むことはできません。

たとえば、次のようにSASSファイルのコードを圧縮できます-

#first {
   background-color:#00FFFF;color:#C0C0C0
}

#first p {
   width:10em
}

.highlight {
   text-decoration:underline;font-size:5em;background-color:#FFFF00
}