1.SASS開口
1.什么是SASS（文法的に素晴らしいスタイルシートサス）？
SASSは2007年生まれのRuby実装、早いと最も洗練されたCSSプリプロセッサの使用です。
維持し、拡張するCSSが容易となるよう、それは、特性変数、ミックスイン（混合）、ネストされた、機能及び操作を増加させる、CSS言語を拡張します
2.どのようにSASSを学ぶには？
LESSは、2009年に誕生した、JavaScriptの実装を使用してCSSプリプロセッサです。
LESS特性はSASSの多数に見られるように、後でSASS未満、LESSの誕生以来、サスに影響を与えました。
だからSASSのほとんどを学ぶためにLESS同等のものを学ばなければなりません
3.LESSとSASSファイル拡張子差
.lessへLESS終了
SASSは.sassまたは.scssし終了します
二つの異なる語尾の違い：代わりに{}のインデント終わりではなく、バックステートメントセミコロンを書き込むので、階層を表し.sass
{には} .scss階層を表し、文はセミコロンをライトバックする必要があります
エンタープライズ開発はエンド.scssで推奨されます。それは、最新の文言です。
注意：必要がSASSファイルをコンパイルするコアラを使用する場合は、（ファイル名を含む）プロジェクトのディレクトリ構造の中国と特殊文字は表示されませんすることができます。それ以外の場合は、コンパイルされません。
4.sassのコンパイル
JSによって達成することができないので、それほどの.cssを助けるためにコンパイルなし.jsファイルはありません。唯一のコアラを使用してください。またはパッケージ管理ツール
<DIV CLASS = "父">
<DIV CLASS = "息子"> </ div>
</ div>
図は、従来の文言をCSS：
<スタイル>
* {
マージン：0;
パディング：0;
}
。お父さん{
幅：300ピクセル;
高さ：300ピクセル;
背景：サーモン。
位置：絶対;
左：50％;
トップ：50％;
変換：（-50％、-50％）を変換。
}
。息子{
幅：200pxの。
高さ：200pxの。
背景：スカイブルー。
位置：絶対;
左：50％;
トップ：50％;
変換：（-50％、-50％）を変換。
}
</スタイル>
使用SASSは書きました：
@mixinセンター
位置：絶対
左：50％
トップ：50％
変換：変換（-50％、-50％）
。お父さん
幅：300ピクセル
高さ：300ピクセル
背景：サーモン
@includeセンター
。息子
幅：200pxの
高さ：200pxの
背景：茶色
@includeセンター
SCSSの書き込みを使用します
@mixin中心{
位置：絶対;
左：50％;
トップ：50％;
変換：（-50％、-50％）を変換。
}
。お父さん{
幅：300ピクセル;
高さ：300ピクセル;
背景：サーモン。
@includeセンター;
}
。息子{
幅：200pxの。
高さ：200pxの。
背景：茶色;
@includeセンター;
}
2.SASSのコメント
1.sassコメントで
などと少ないです
単一行コメントをコンパイルすることはできません（コンパイル済みのファイルには表示されません）
複数行コメントがコンパイルされます（コンパイル済みのファイルに表示されます）
3.SASS変数
変数1.sass
定義されただけで、異なるフォーマットでSASS変数とほぼ同じ、
以下の変数が定義されています：変数名@：値;
SASS変数を定義：¥変数名：値を、
2.SASS変数特性
SASSとほぼ同じ特性でLESS変数
2.1定義は、適用範囲を定義します
2.2変数は他の変数に割り当てることができます
2.3（近接原理を使用してアクセス）は、グローバルとローカル変数を区別
注意事項：LESS可変遅延がロードされている、あなたは、の定義を使用することができます
SASS変数が定義されていないの最初の使用後に、遅延ロードではありません
4.SASS変数補間
1.変数補間とは何ですか？
プロパティの値が変数として使用することができた場合
それは属性名であるかの名前を選択して、直接変数を使用できない場合でも、あなたは変数展開形式を使用する必要があります。
変数補間2.SASS
SASSと少ない変数補間も同じですが、ちょうどない同じ形式。
補間法より少ない変数：変数名} {@
補間スキームSASS変数：変数名$＃{}
<div> </ div>
$サイズ：200pxの。
W $：幅;
$ sさん：DIV。
＃{$のS} {//変数補間
＃{$のW}：$サイズ; //変数補間：変数
身長：$サイズ。
背景：サーモン。
}
操作5.SASS
1.SASS操作？
SASSとLESSが動作して、あまりにも、サポート+、 - 、*、/
注意事項：運転中やSASSの操作のいずれかでLESSは（追加が必要です）
混合6.SASS
1.SASSで混合
SASSとミックスのLESS、あまりにも、異なる定義フォーマットとフォーマットを呼び出します
LESS定義された混合：混合名前{名前}または混合（）{}
LESS混合コール：混合名前、またはハイブリッド名（）;.
{名前}混合@mixin、または名前を混合@mixin（）{};：SASSは、定義された混合します
名前を混合@include;または混合@include名（）;：SASS混合コール
パラメータの混合で7.SASS
パラメータで混合1.SASS
における同じパラメータでLESS SASSと混合
無デフォルトのパラメータ値を持つ1.1
デフォルトのパラメータ値を持つ1.2
1.3パラメータの割り当てを指定します
<DIV CLASS = "BOX1"> </ div>
<DIV CLASS = "BOX2"> </ div>
デフォルトのパラメータ値なし
WHC @mixin（$の$ H、W、$ c）は{
幅：$ Wを、
身長：$さh;
背景：$ Cを、
}
デフォルトのパラメータ値を持ちます
WHC @mixin（$ W：100pxには、$ H：100pxには、$ C：＃000）{
幅：$ Wを、
身長：$さh;
背景：$ Cを、
}
.box1 {
/ *幅：300ピクセル;
高さ：300ピクセル;
背景：seagreen; * /
WHC @include（300ピクセル、300ピクセル、seagreen）。
}
.box2 {
/ *幅：200pxの。
高さ：200pxの。
背景：サーモン; * /
// @ WHC（200pxの、200pxの、鮭）を含み;
デフォルトのパラメータ値で1.2; // // @）（WHCが含まれます
@include WHC（$のC：青）; //1.3指定されたパラメータの割り当てへ
}
可変パラメータ8.SASS
変数パラメータ1.SASS「...」
また、LESS SASS変数パラメータと同じ、
すべてのSASSのために達成するためのJSを使用していないので、引数がミックスの中で直接使用することはできません
可変パラメータは... $ argsをでフォーマットを定義する必要があり、その後、$ argsを使用することにより、
注意事項：可変パラメータとしてLESSと、リストの最後のパラメータで記述する必要があります
<div> </ div>
/ * @ミックスインアニメーション（$名、$時間、$モード、$遅延）{
トランジション：$名$時間$モード$遅延。
} * /
/ * @ミックスインアニメーション（$ argsを...）{
トランジション：$ argsを。
} * /
@mixinのアニメーション（$名、$時間、$ argsを...）{
トランジション：$名$時間$ argsを、
}
DIV {
幅：200pxの。
高さ：200pxの。
背景：サーモン。
@includeアニメーション（すべて、4S、リニア、0）
}
DIV：ホバー{
幅：400ピクセル;
高さ：400ピクセル;
背景：darkcyan。
}
SASSのインポート他のファイル9.SASS
1.scssファイルのインポート他のファイル.scss
SASSとLESSファイルと同じように、他のSASSファイルをインポートをサポート
2.ファイルのインポート他の利点：
コードの再利用性を向上させます
実際には、ネイティブもCSSの@import CSSのインポート他のファイルによってサポートされていますが、一般的に使用されていません
その理由は、一般的なネイティブの@import CSSのインポート他のファイルではありません、
あなただけのデバイスを実行することは、要求の数が増え、その結果、対応するCSS @importにファイルをダウンロードするために特に遅いページがロードを目指します
@importでLESSとSASSを直接インポートされたファイルは、現在のファイルにコピーされているが速く、その一つだけの要求をCSSを生成し、
<div> </ div>
@import "06.scss"。
DIV {
幅：200pxの。
高さ：200pxの。
背景：サーモン。
@includeセンター;
}
組み込み関数10.SASS
組み込み関数1.SASS
そしてLESSとして、SASSはまた私達の使用を容易にするために多くの組み込み関数を提供します
組み込み関数の詳細については、https://www.sass.hk/見ます
実際には、データを処理するためにCSSを使用することをお勧めしません。CSSは、主にデザインスタイルのために使用されます
1.1文字列関数
unquote（$文字列）：引用符で文字列を削除します。
引用符（$文字列）：文字列に引用符を追加します。
TO-大文字（$文字列）：文字列の小文字大文字に
TO-小文字（$文字列）：文字列の大文字は小文字に変換し、
1.2数値関数
パーセント（$値）：割合に単位なしで代謝回転数;
ラウンド（$値）の値が最も近い整数に変換し、四捨五入されています。
CEIL（$値）：切り上げます。
床には、（$値）：切り捨て。
ABS（$値）：数の絶対値をとります。
分（$数字...）：複数の値のうちの最小値を見つけます。
MAX（$数字...）：いくつかの中で最大値を探します。
ランダム（）：乱数を取得します。
1.3。カラー機能
RGB（赤$、$緑色、$ブルー）：赤、緑、青の値に応じて色を作成します。
RGBA（赤$、緑色$、$ブルー、$アルファ）：赤、緑、青、透明の色を作成するためによれ。
赤（$色）：赤色から値を取得する工程;
グリーン（$色）：緑色から値を取得する工程;
青（$色）：青色から値を取得する工程;
2つの色を混合する：（$色-1、$色-2、[$重量]）を混合します。
機能の1.4。リスト
長さ（$リスト）：値のリストの長さを返します。
n番目（$リストは、$ N）：リストで指定された特定のラベルの値を返します。
参加（$ LIST1、$ LIST2、[$セパレータ]）の2つの列がリストに一緒に接続されます。
追加（$ LIST1、$ヴァル、[$セパレータ]）：最終リスト上の値。
ジップ（$リスト...）：いくつかのリストは多次元に統合されている一覧表示されます。
インデックス（$リスト、$値）：値のリスト内の位置の値を返します。
2.カスタム機能：
/ *カスタム機能* /
@関数広場（$ num個）{
$ num個+ $ + PXか@return。
}
DIV {
幅：正方形（20）。
高さ：200pxの。
//ミックス：ミックスカラー
背景：ミックス（赤、青）; //組み込み関数
}
階層11.SASS
階層1.SASS
そしてLESSネストされた、ネストされたデフォルトの構造のためのサポートとして、子孫のセレクターに変換されます
同様に、アンパサンドによって、子孫のセレクターにLESSともサポートは変換されません。
<DIV CLASS = "父">
<DIV CLASS = "息子"> </ div>
</ div>
。お父さん{
幅：300ピクセル;
高さ：300ピクセル;
背景：サーモン。
＆{ホバー
幅：100ピクセル;
高さ：100pxに。
}
。息子{
幅：200pxの。
高さ：200pxの。
背景：seagreen。
}
}
12.SASSの継承
1.SASSの継承
SASSと相続における相続のLESS、および達成するために、セレクタで設定されているが、ちょうどではない同様のフォーマットと同様に
違いをミキシングと継承
混合はどのように多くのコピーが代わりに使用されますどのように多くの、直接のコピーであります
継承は、労働組合のセレクタを介して行われ、だけではなくコピーを保持します
<DIV CLASS = "父">
<DIV CLASS = "息子"> </ div>
</ div>
/ *センターは、混合することによって達成することができます。@includeの位置に、直接混合コードをコピーしました。コンパイル後の冗長コードがあります
@mixin中心（）{
トップ：50％;
左：50％;
変換：（-50％、-50％）を変換。
}
* /
。センター{
トップ：50％;
左：50％;
変換：（-50％、-50％）を変換。
}
* /
。お父さん{
@extend .center;
幅：300ピクセル;
高さ：300ピクセル;
背景：サーモン。
//中心ハイブリッド実装; // @センター（）を含みます
。息子{
@extend .center;
幅：200pxの。
高さ：200pxの。
背景：seagreen。
// @）（センターなど。
}
}
コンパイル済みの継承の.cssファイル：
@charset "UTF-8";
.center、.father、.father .son {//設定するセレクタの実装と
トップ：50％;
左：50％;
変換：（-50％、-50％）を変換。
}
。お父さん {
幅：300ピクセル;
高さ：300ピクセル;
背景：サーモン。
}
.father .son {
幅：200pxの。
高さ：200pxの。
背景：seagreen。
}
判定条件13.SASS
判定条件1.SASS
SASSとLESSは、条件付きサポートしていますが、同じように、より徹底したSASS条件付きサポート
SASSのサポート
@If（条件文）{}
@else場合（条件文）{}
... ...
@他の（条件文）{}
{}のコードでSASSは、条件が偽またはnullでない場合ときに実行されます
LESSとSASSなどの条件文は>> = << = ==判断を経由してサポート
SASSとモードが一致しません
14.SASSサイクル
1.SASSサイクル
Niubiの場所よりもSASS LESSを直接サポートSASSループに位置し、独自の判断を達成するために+ LESS条件を混合する必要性
SASSは、forループとしながら、それぞれ、2つのサイクルをサポートしています
2.forサイクル
整数{整数}の終わりまで開始から@For $ I
整数{整数}の開始から終了までの$ I @For
パケットヘッダの終わりにパケットヘッダの終わりを介して2つの違いは、ありません
3.whileサイクル
@While（条件文）{}
<UL>
<LI> 1 </ LI>
<LI> 2 </ LI>
<LI> 3 </ LI>
<LI> 4 </ LI>
<LI> 5 </ LI>
<LI> 6 </ LI>
<LI> 7 </ LI>
<LI> 8 </ LI>
<LI> 9 </ LI>
<LI> 10 </ LI>
</ UL>
{
{
幅：100％;
高さ：は50px;
国境：1pxの固体＃000;
フォントサイズ：20ピクセル;
色：seagreen。
背景：サーモン。
/ *＆：n番目の子（5）{
背景：sandybrown。
}
＆：n番目の子（6）{
背景：sandybrown。
}
＆：n番目の子（7）{
背景：sandybrown。
}
＆：n番目の子（8）{
背景：sandybrown。
} * /
/ *
5〜8から$ I @For {//设置5,6,7,8
5から@For $ I 8 {//设置5,6,7へ
* /
$ I：5;
@While（$ I <= 8）{
＆：n番目の子（＃{$ I}）{
背景：sandybrown。
}
$ I：$ I + 1;
}
}
}