Sass: Sass と Koala の使用に関する最初の概要 tools_html/css_WEB-ITnose

1. Koala をダウンロードし (適切なシステム バージョンを見つけて)、インストールします

2. まず css フォルダーを作成し、その中に新しいテキスト ドキュメント (.txt) を作成し、demo .scss という名前を付けます

3. Koala を開き、css フォルダーをドラッグします。出力方法を変更できます

【拡張】SASS には 4 つのコンパイル スタイル オプションがあります:

nested: 埋め込まれたインデントされた CSS コードを設定します。 、これがデフォルト値です。

expanded: インデントされていない、展開された CSS コード。

compact: 簡潔な形式の CSS コード。

compressed: 圧縮された CSS コード。

4 番目に、再びコードを記述します。任意のテキスト記述ツールを使用して、demo.scss を開きます

1.css スタイルの記述

1 ul li a{2     color: red;3 }

保存後、2 つのファイルが自動的に生成されます (前提条件: しないでください)。 Koala ソフトウェアを閉じます)

2. 上記の CSS コードを Sass スタイルで demo.scss に記述します

変更して保存します。

CSS を次のように書きたい場合:

ul{    li{        a{            color: black;        }    }}

対応する sass は次のようになります:

ul li a:hover {  color: blue;}

[説明]& は置換要素そのものを表し、ここでは変数を参照します。 : すべての変数は $ で始まります

demo.scss に次のコードを書きます:

ul{    li{        a{            color: black;            &:hover{                color: blue;            }        }    }}

保存後、コンパイルされた CSS:

$color: #abc;a{    color:$color;}

5. 今日書いたコードのスクリーンショット

==デモ.scss ==

== デモ.css ==