4つの柔軟なScssコンパイル出力スタイル

多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコンパイル方法は基本的に 1 つだけです。実際、Scss は、より多くの人々のニーズを満たすために 4 つのスタイルの CSS 出力を提供します。さまざまな出力モードは次のとおりです。

• ネストされた出力モード ネストされた
• 拡張出力モード
• コンパクト出力モード
• 圧縮出力モード 圧縮

その後、パラメータを自由に使用して、お気に入りの CSS スタイルを生成できます。

1. ネストされた

nested はネストされた出力スタイルです。つまり、左中括弧と CSS クラス名 (最初の行) が揃えられます。右中括弧は折り返さずに最後の行に揃えられます。

このスタイルは、通常この方法で CSS を記述する人はあまりおらず、スタイルがかなりぎこちないため、あまり頻繁に使用されません。

コンパイルコマンドは次のとおりです。

sass abc.scss:abc.css --style ネスト

次の結果が生成されます。

.ヘッダー{
  背景: #f00;
  色: #000;
  フォントサイズ: 20px; }
.サイドバー{
  フロート: 左;
  幅: 300ピクセル;
  高さ: 500px; }
。主要 {
  フロート: 右;
  幅: 800ピクセル;
  パディング: 20px;
  最小高さ: 500px; }

2. 拡張

Expanded は拡張出力モードであり、フロントエンド開発者が CSS を直接記述するためによく使用されるスタイルでもあります。左中括弧は最初の行に揃えられ、折り返されません。右中括弧は新しい行で終了します。

コンパイルコマンドは次のとおりです。

sass abc.scss:abc.css --スタイル展開

次の結果が生成されます。

.ヘッダー{
  背景: #f00;
  色: #000;
  フォントサイズ: 20px;
}
.サイドバー{
  フロート: 左;
  幅: 300ピクセル;
  高さ: 500px;
}
。主要 {
  フロート: 右;
  幅: 800ピクセル;
  パディング: 20px;
  最小高さ: 500px;
}

3.コンパクト

Compact はコンパクトな出力方法で、フロントエンド開発者が CSS を直接記述するためによく使用されるもう 1 つの方法です。左と右の中括弧は折り返されません。中括弧内の CSS プロパティ値は折り返されず、次々に記述されます。

単一行の CSS を書くことを好む友人にとっては非常に使いやすいです。

コンパイルコマンドは次のとおりです。

sass abc.scss:abc.css --style コンパクト

次の結果が生成されます。

.header { 背景: #f00; 色: #000; フォントサイズ: 20px; }
.sidebar { float: left; 幅: 300px; 高さ: 500px; }
.main { float: right; 幅: 800px; パディング: 20px; 最小高さ: 500px; }

4. 圧縮

compressed は圧縮された出力モードです。すべての内容は折り返されず、すべてのコメントと空白が削除されます。すべてのコードを 1 つのボールに圧縮します。

これは通常、オンラインの状況、または CSS ファイルを読み取ったり変更したりする必要がない場合に使用されます。ファイルは小さくなります。

コンパイルコマンドは次のとおりです。

sass abc.scss:abc.css --style 圧縮

次の結果が生成されます。

.header{background:#f00;color:#000;font-size:20px}.sidebar{float:left;width:300px;height:500px}.main{float:right;width:800px;padding:20px;min-height:500px}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。