SASS - 出力フォーマット - コードワールド

サスコンパイルCSSの出力形式をカスタマイズすることができます。出力フォーマットの4種類があります。

：入れ子になった - ネストされた形式
：拡張 - 拡大フォーマット
：コンパクト - コンパクトな形式
：圧縮 - 圧縮フォーマット

デフォルトのフォーマットです:nested。

あなたは使用することができ:style、出力形式を設定するためのオプションやスタイルのコマンドラインパラメータを。

：ネストされました

そのモニタリング（コンパイラ）コマンドのコンテキストでは、出力形式を指定することができますnested：

sass --watch styles.scss:styles.css --style nested

nestedフォーマット、CSSコードの出力：

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

nestedデフォルトの形式は、ユーザーが指定することはできません。

：拡大

拡大フォーマットは、開発者の手で書かれた形式のように見えます。

CSSの出力はフォーマットを拡張するように設定されているために、次のコマンドを使用できます。

sass --watch styles.scss:styles.css --style expanded

このフォーマットでは、CSSコードの出力：

div {
  padding: 20px;
  margin: 20px;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: #ff8000;
}

.four {
  background: #ffa600;
}

.five {
  background: #ff5900;
}

：コンパクト

コンパクトなフットプリントはるかに小さいフォーマットは、各CSSセレクタの定義は、一つだけの行を占めます。

CSSへの出力は、次のコマンドを使用して、コンパクトな形式に設定されています：

sass --watch styles.scss:styles.css --style compact

このフォーマットでは、CSSコードの出力：

div { padding: 20px; margin: 20px; }

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

.four { background: #ffa600; }

.five { background: #ff5900; }

：圧縮

圧縮形式は、定義されたセレクタがラップしていない、一般的に製品版に使用する最小の紙のように少しスペースを占有します。

次のコマンドを使用して、CSS出力圧縮形式を設定するには：

sass --watch styles.scss:styles.css --style compressed

このフォーマットでは、CSSコードの出力：

div{padding:20px;margin:20px}.one{background:red}.two{background:yellow}.three{background:#ff8000}.four{background:#ffa600}.five{background:#ff5900}

SASS - 出力フォーマット

：ネストされました

：拡大

：コンパクト

：圧縮

おすすめ