使用SASS、以下、スタイラスのCSSプリプロセッサの違い

より詳細なリファレンスドキュメント差：https://blog.csdn.net/pedrojuliet/article/details/72887490

使用変数：

　　SASS：$ base_color：#efefefのような変数を使用して、$記号の定義

　　以下：@base_font_size：次のような変数を使用して、@記号の定義に16px

　　スタイラス：任意の変数の設定なし（変数は、@記号で始めることはできません）、あなたは「=」、および「スペース」または変数を使用することができます「：」、のような：base_font_color：赤、borderwidth = 1ピクセル、BORDERCOLOR #cacaca

インポート操作（@import）：

　　以下のような：

ベースCSS文件
 / * ファイル{タイプ}。* / 
ボディ { 
  背景：＃000。
} 


xxxのCSS文件
@インポート"1.css"。
インポート「ファイル@ { タイプ } 」。
P { 
  背景：＃092873。
} 


结果
輸入"1.css" @; 
本体 { 
  背景：＃000。
} 
、P { 
  背景：＃092873。
}

継承：我々は複数の要素と同じスタイルを定義する必要があるとき、私たちは相続慣行の使用を検討することができます

　　SASS継承：文をコード@extendの組み合わせにより達成される（スタイラスは、この方法の継承を使用することができます）

.message { 
  ボーダー：1ピクセル固体#CCC。
  パディング：10pxの ; 
  色：＃333 ; 
} 

.success { 
  @extendの.message。
  ボーダー色：緑 ;  
} 

.ERR { 
  @extendの.message。
  ボーダー色：赤 ; 
}

　　以下の継承

.message { 
  ボーダー：1ピクセル固体#CCC。
  パディング：10pxの ; 
  色：＃333 ; 
} 
.success { 
  .message。
  ボーダー色：緑 ; 
} 
.ERROR { 
  .message。
  ボーダー色：赤 ; 
}

混合（ミックスイン）：多くの場合、複数の要素で使用される特定のCSSは、ミックスインのCSSで定義することができる機能やマクロのようなビットは、共有され、その後、缶必要MIXINに導入

　　SASSの構文：

/ * 変数は、デフォルト値の2ピクセル、任意受け付け、混合構文を定義* / 
：@mixin ERR（2ピクセル$ borderWidth） { 
    ボーダー：$ borderWidth #cacacaソリッド
    カラー：#cacaca
 } 

.Genericエラー { 
    パディング：20ピクセルを ; 
    マージン：4PX ; 
    @includeエラー（5pxの）;   / * 呼び出し文法混合し、境界線を得るためにパラメータを渡す：5pxの固体#cacaca * / 
}

　　スタイラス文法

エラー（borderWidth = 2ピクセル） { 
  ボーダー：borderWidth＃F00の固体 ; 
  色：位のF00 ; 
} 
.Genericエラー { 
  パディング：20ピクセル ; 
  マージン：4PX ; / *呼び出し文法混合し、境界線を得るためにパラメータを渡す：5pxの固体#cacaca * /、
  エラー（）;
 }

どのように排出ノンストップ燃える心は、平凡で姿を消したことができます

使用SASS、以下、スタイラスのCSSプリプロセッサの違い

おすすめ