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は異常なコンテナ操作を排除する

推薦する

JavaScript配列の一般的なメソッドの概要

目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

MySQL の時間タイプとモードの詳細

目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...

HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にス...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

JavaScript配列の重複排除のいくつかの方法についての詳細な説明

目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...

MySQLで最大接続数を達成する方法

目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

JavaScript CollectGarbage 関数の例

まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...