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

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 を応援していただければ幸いです。

<<:  Vue カプセル化 TabBar コンポーネントの完全なステップ記録

>>:  Dockerは異常なコンテナ操作を排除する

推薦する

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...

Vueトップタグ閲覧履歴の実装

目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

便利なモバイルスクロールプラグイン BetterScroll

目次スクロールをスムーズにするBetterScrollのスクロール体験慣性ローリングエッジリバウンド...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

HTML でハイパーリンク タグを使用するチュートリアル

ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...

Nginx 502 Bad Gateway エラーの原因と解決策

Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...

MySQL 5.7 でルートパスワードを変更する方法

MySQL 5.7 以降では、多くのセキュリティ更新が追加されました。旧バージョンのユーザーは慣れて...