多くの人は、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 コンポーネントの完全なステップ記録
ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...
目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...
目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...
この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...
みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...
目次スクロールをスムーズにするBetterScrollのスクロール体験慣性ローリングエッジリバウンド...
JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...
最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...
ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...
Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...
MySQL 5.7 以降では、多くのセキュリティ更新が追加されました。旧バージョンのユーザーは慣れて...