以下サスプリプロセッサと

CSSプリプロセッサとは何ですか

ウェブ形式のエンコードに特化したプログラミング言語を使用して、通常のCSSファイルにコンパイル、CSS彼が延長され、このような変数、ネストされた、混合相続など、CSSの多くよりも余分な機能、。

以下の文法

（1）変数

以下は、変数はグローバルスタイルで使用できるカスタム変数への開発者は、スタイル変数は、それが簡単に変更することにすることができます。

@color：＃4D926F。
＃ヘッダー{ 
    色：@color。
} 
H2 { 
    色：@color。
}

コードの再利用（2）ミックスイン（混合）

多くの動的言語は、ミックスイン特性をサポートし、それは多重継承の実装であり、以下、混合は、別のクラスの導入を意味するだけで現在のクラスとプロパティを追加するために、クラスで定義されています。

以下のファイル

// スタイルセレクタ定義
.roundCornersに（@radiusを：5pxの）{
     -moz-BORDER- RADIUS：@radius; 
     -webkit-BORDER- RADIUS：@radius; 
     ボーダー - RADIUS：@radius; 
} 
// 追加のスタイルセレクタが使用
＃ヘッダー{ 
    ; .roundCorners 
} 
{#footer 
    .roundCorners（10pxのを）; 
}

生成されたCSSファイルをコンパイルした後

＃ヘッダー{ 
     -moz-BORDER- 半径：5pxの。 
    -webkit-BORDER- 半径：5pxの。
    国境 - 半径：5pxの; 
} 
#footer {
     -moz-BORDER- 半径：10pxの。 
    -webkit-BORDER- 半径：10pxの。
    国境 - 半径：10pxの; 
}

ミックスインは、実際には別のクラスを使用して、ネストされたクラスを可能に巣、クラスはまた、ネストされた変数と呼ばれることもあります。

（3）ネストされたルール

#home { 
  色：青。
  幅：600PX。
  高さ：500pxなど。
  ボーダー：当初; 
  #topトップ{ 
       ボーダー：冒頭。
       幅：90％; 
  } 
}

擬似要素の操作が容易になるように私たちのスタイルシートは、ネストされたルールながら、よりコンパクトで読みやすくを書くように、書き込みのネストされたルールは、対応するDOM構造以下です。

{ 
     色：赤、
     テキスト - 装飾：なし; 
     ＆：ホバー{ // ＆この要素の同じ要素または疑似クラスを解析するには、要素は＆の子孫ではない解析
          の色：ブラック、
          テキスト - 装飾：下線。
    } 
 }

 

　　以下サスとの両方は、CSSプリプロセッサを属し、機能的に類似し、同様の手順は、CSS言語を書き込む方法で使用される変数を有する、混合、ネストされ、継承の特性である、究極の目標は、書き込みCSSを容易にすることですおよびメンテナンス。

 

短所：CSSにコンパイルする必要があり、追加のオーバーヘッドです。