コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > Sass: Sass と Koala の使用に関する最初の概要 tools_html/css_WEB-ITnose

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

WBOY
リリース： 2016-06-24 11:41:21
オリジナル
1239 人が閲覧しました

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 ==

    関連ラベル：
    Sass：初识Sass与Koala工具的使用
    ソース：php.cn
    前の記事：モバイル端末開発の必須知識（再版）_html/css_WEB-ITnose 次の記事：display:table、display:table-row、display:table-cell の使用法_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    3
    2160
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2310
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1947
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1821
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1875
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート