CSSプリコンパイルツールSASS詳細

10068 ワード

ss node.js

sassはcssのプリコンパイルツールです

つまりより優雅に書けるcss

sass書いたものブラウザは

を知らない

は依然としてcssに変換するブラウザで

を実行する.

この時

を手伝ってくれる道具が必要です
sass環境のインストール

以前のsassは、rubyの環境

に依存する必要がある.

現在のsassは、pythonの環境

に依存する必要がある.

しかしnodeが強くなった後、私たちはnode環境に依存するだけで

もできます.

は、npmを使用してグローバルなsass環境をインストールする必要があります.

#      sass   
$ npm install sass -g

コンパイルsass

グローバルsass環境以降

sassのファイルをコンパイルできます

sassのファイル接尾辞には、.sassと.scss

の2種類があります.

彼らの2つの違いは{}と;の

があるかどうかです.

.scssファイル

h1 {
    width: 100px;
    height: 200px;
}

.sassファイル

h1
	width: 100px
	height: 200px

よく使われているのは.scssファイル

です

.sass私たちは書くのに慣れていないので、もちろん、書くことができれば

を使ったほうがいいです.

私たちはまず中のどんな内容を気にしないで、この.scssあるいは.sassファイルブラウザは

を知らない.

命令で2つのファイルをcssファイル

#   index.scss   ，    index.css
$ sass index.scss index.css

に変更します

これでcssファイルを得ることができ、ページにもcssファイルを導入すれば

になります.
リアルタイムコンパイル

さっきのコンパイル方法は1回の

しかコンパイルできませんでした

ファイルを変更した後、新しい命令を実行しなければ

できません.

リアルタイムコンパイルは、ファイルの変更に伴い、cssファイル

に自動的に翻訳されます.

も、

#      index.scss   ，           ，    index.css     
$ sass --watch index.scss:index.css

を完了するために命令を使用する.

その後、index.scssファイルの内容を変更すると、index.cssファイルの内容が自動的に

更新されます.
リアルタイム監視ディレクトリ

以前のリアルタイムモニタリングでは、1つのファイル

しか監視できませんでした.

しかし、私たちは多くのファイルを書く可能性があります

だからフォルダを用意しなければなりません.中に入っているのは全部sassファイル

です.

リアルタイムで中の各ファイルをcssフォルダの中の

にコンパイルします.

は、

#      sass     ，     ，        css     
$ sass --watch sass:css

を完了するために命令の形式を使用する.

このように、sassフォルダの下の内容を変更すると、cssフォルダの

にリアルタイムで対応します.

新しいファイルを追加しても

にリアルタイムで応答します.

しかしあなたは1つのファイルを削除して、cssフォルダの中で自動的に削除することはできなくて、私達自身が手動で

を削除する必要があります
sass構文

sassファイルをコンパイルできるようになりました.次にsassの文法を勉強しなければなりません.

なぜ彼はこんなに強くて、こんなに使いやすいのか、すべて強い文法に頼っています.

.sassと.scssのファイルの文法は同じですが、違いは{}と;

です.
変数＃ヘンスウ＃

変数を定義し、後のコードで

を使用します.

$を使用して変数

//      $c     ，     
$c: red;

h1 {
    //     $c     
    color: $c;
}

を定義する.

上で定義した変数は、グローバルに

を使用できます.

ルールブロック内でプライベート変数

h1 {
    //    $w       h1         
    $w: 100px;
    width: $w;
}

を定義することもできます.
ネスト

sassの中で私たちが最も長く使ったのは

をネストしたことです.

しかもかなり使いやすい

h1 {
    width: 100px;

    div {
        width: 200px;
    }
}

//     
h1 {
    width: 100px;
}

h1 div {
    width: 200px;
}

これがネストで、理論的には無限にネストすることができます

ul {
    width: 100px;

    li {
        width: 90px;

        div {
            width: 80px;

            p {
                width: 70px;

                span: {
                    color: red;
                }
            }
        }
    }
}

ネスト&

ネスト内のもう一つの識別子は&です

を使用できます.

まず一例

div {
    width: 100px;
    height: 100px;

    :hover {
        width: 200px;
    }
}

//      div          width    200
//         
div {
    width: 100px;
    height: 100px;
}
div :hover {
  	width: 200px;
}

を見る.

予想した結果とは違う

この時点で&を用いて

div {
    width: 100px;
    height: 100px;

    &:hover {
        width: 200px;
    }
}

//     
div {
    width: 100px;
    height: 100px;
}
div:hover {
  	width: 200px;
}

に接続する.

この時私が必要としたのと同じ

グループネスト

グループネストは、

div {
    width: 100px;

    .box1, .box2, .box3 {
        color: red;
    }
}

//     
div {
  	width: 100px;
}
div .box1, div .box2, div .box3 {
 	color: red;
}

を同時にネストする複数のラベルである.

もう1つは、複数のラベルが同時にネストする1つのラベル

h1, h2, h3 {
    width: 100px;

    .box {
        color: red;
    }
}

//     
h1, h2, h3 {
 	width: 100px;
}
h1 .box, h2 .box, h3 .box {
  	color: red;
}

である.
ネストされたプロパティ

scssには特殊なネスト

があります

を属性ネスト

と呼ぶ

はセレクタネストとは異なり、書き込み属性の場合に使用される

div {
    border: {
        style: solid;
        width: 10px;
        color: pink;
    }
}

//     
div {
    border-style: solid;
    border-width: 10px;
    border-color: pink;
}

です.

この属性ネストは、

div {
    border: 1px solid #333 {
        bottom: none;
    }
}

//     
div {
    border: 1px solid #333;
    border-bottom: none;
}

を特別に使用することもできる.
かき混ぜる

はミキサ

とも呼ばれる.

は、scssファイルで

//            @mixin    
@mixin radius {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

を使用する「関数」を定義するものである.

上に定義されたミキサ

がある

彼はコンパイルされません.彼を使用してから、

//         @include    
div {
    width: 100px;
    height: 100px;

    @include radius;
}

にコンパイルされます.

これですねさっき定義したミキサーを持ってきて

を使います

コンパイル結果

div {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

ミキサパラメータ

ミキサは「関数」のように、必ず「関数」のようにパラメータ

を伝達することができます.

は「関数」の使い方と同様に、タイミングのときは「形参」、呼び出しのときは「実参」

//      
@mixin my_transition($pro, $dur, $delay, $tim) {
    -webkit-transition: $pro $dur $delay $tim;
    -moz-transition: $pro $dur $delay $tim;
    -ms-transition: $pro $dur $delay $tim;
    -o-transition: $pro $dur $delay $tim;
    transition: $pro $dur $delay $tim;
}

である.

このミキサーを使用するときに「実パラメータ」

div {
    width: 100px;
    height: 100px;

    @include my_transition(all, 1s, 0s, linear);
}

が伝達される.

コンパイル結果

div {
    width: 100px;
    height: 100px;
    -webkit-transition: all 1s 0s linear;
    -moz-transition: all 1s 0s linear;
    -ms-transition: all 1s 0s linear;
    -o-transition: all 1s 0s linear;
    transition: all 1s 0s linear;
}

は何個の「形参」を書いているのか、呼び出し時に何個の「実参」

を渡すのか.

さもなくば間違いを報告する

パラメータのデフォルト

ミキサーを定義するときに、いくつかのパラメータにデフォルト値

を書くこともできます.

これで「実参」を渡さなくてもいい

//             
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
    -webkit-transition: $dur $pro $delay $tim;
    -moz-transition: $dur $pro $delay $tim;
    -ms-transition: $dur $pro $delay $tim;
    -o-transition: $dur $pro $delay $tim;
    transition: $dur $pro $delay $tim;
}

で使用する場合、渡さない場合はデフォルト値

div {
  width: 100px;
  height: 100px;

  //      ，     ，        
  @include my_transition(2s);
}

を使用します.

コンパイル結果

div {
    width: 100px;
    height: 100px;
    -webkit-transition: 2s all 0s linear;
    -moz-transition: 2s all 0s linear;
    -ms-transition: 2s all 0s linear;
    -o-transition: 2s all 0s linear;
    transition: 2s all 0s linear;
}

継承

sassで継承を使用すると開発効率が大幅に向上する

実は継承は簡単で、前に書いたセレクタの中の内容を直接持ってきて

div {
    width: 100px;
    height: 100px;
    background-color: pink;
}

これは前に書いたルールスタイルシート

です.

次は別のスタイルを書きます.私が書く内容は前のdivと同じで、自分の内容もあります.

では、このスタイルシートを先に継承して、自分の内容を書けばいいです.

p {
      @extend div;

      font-size: 20px;
      color: red;
}

コンパイル結果

div, p {
    width: 100px;
    height: 100px;
    background-color: pink;
}

p {
    font-size: 20px;
    color: red;
}

scssファイルの注釈はいくつかに分けられます

コンパイル時にコンパイルされない注釈

//         ，      ，

コンパイル時にコンパイルされる注釈

/*        ，         */

強力注釈

/*!         ，             ，              */

ファイルのインポート

変数の定義を学びました.ミキサ

を定義しました.

であるが、この2つのコンテンツは定義後、使用されなければコンテンツがコンパイルされない

である.

ですので、変数を単独でファイルを書き、ミキサーで単独でファイルを書き、直接インポートして

//    variable.scss
$w: 100px;
$h: 200px;
$c: pink;

//    mixin.scss
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
    -webkit-transition: $dur $pro $delay $tim;
    -moz-transition: $dur $pro $delay $tim;
    -ms-transition: $dur $pro $delay $tim;
    -o-transition: $dur $pro $delay $tim;
    transition: $dur $pro $delay $tim;
}

@mixin radius {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

を使用することができます.

それから私たちの主なファイルの中でこの2つのファイルをインポートすればいい

//    index.scss
@import './variable.scss';
@import './mixin.scss';

div {
    width: $w;
    height: $h;
    background-color: $c;

    @include radius;
}

h1 {
    @include my_transition;
}

コンパイル結果

div {
    width: 100px;
    height: 200px;
    background-color: pink;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

h1 {
    -webkit-transition: 1s all 0s linear;
    -moz-transition: 1s all 0s linear;
    -ms-transition: 1s all 0s linear;
    -o-transition: 1s all 0s linear;
    transition: 1s all 0s linear;
}

参考リンク:SASS公式サイト

Androidループは名前の似たような画像を読み込みます

SparkがYarnのクラスタpiタスクエラーをコミット