多くの人は、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 コンポーネントの完全なステップ記録
目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...
目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....
1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...
目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...
この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にス...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...
目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...
目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...
目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...
1. 概要information_schema データベースは performance_schema...
Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...
序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...
まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...