SASSノート

1.変数

次のようにSASSスタイルが定義され、変数は、フォントや色のリサイクルとして、再利用のため、定義されている「$」を使用することができます。

$ my- 色：＃000F 
体{ 
  色：$私の - 色。  
}

2.ネストされた定義はCSS

ボディ{ 
  色：$私の - 色。
  DIV { 
       マージン：0 ; 
       パディング：0 ;    
  }     
}

3.混入

CSS、私たちはしばしば、このようなマージントップとして、スタイルを定義するために同じ文に遭遇：5pxの、国境半径を次のようにので、ここで3px、ちょうどと呼ばれる異なる画素、@Mixinは、コードの再利用を達成するために使用することができます。

BORDER-@Mixin 半径（$半径）{ 
  ボーダー - 半径：$半径。  
} 

DIV { 
　@include：境界半径（10pxの）
}

4.継承

我々はいくつかの要素がスタイルのいくつかの類似点を持って発生したが、それは仕方が多少異なる場合は、次のように、継承のソリューションを使用することができます。

％のメッセージ{ 
    ボーダー：1ピクセル固体#CCC。
    パディング：10pxの; 
    色：＃333 ; 
   フォント：14px;  
} 

.message - 警告{ 
  @extendの  ％のメッセージ。
  オレンジ色;  
} 

.message - 警告{ 
  @extendの  ％のメッセージ。
  赤色;  
} 

.message - 警告{ 
  @extendの  ％のメッセージ。
  色：緑;  
}

ここでも定義し、色を有する（@Mixin）を上記混合物を利用することができます

色（$色）{@Mixin 
  色：$色。  
}

5.演算子

SASSが提供する「+」、「 - 」次のように、「*」、「/」、「％」及び他のオペレータ、簡単な計算は、統計的パターンの時間で行うことができます。

$幅：140px; 
$高さ：200pxの。

DIV { 
  幅：（900px - $幅）/ 900 * 100％。
  高さ：（500pxなど - $高さ）/ 900 * 100％   
}

6.css拡大

参考親セレクタ「＆」

以下のように、使用＆親要素のセレクターを表します。

{ 
  色：赤。
  ＆：ホバー{ 
    色：緑
  } 
  body.firefox＆{ 
    フォント - 重量：正常; 
  } 
} 

/ * ===== CSS ===== * / 
{ 
  色：赤。
} 
：ホバー{ 
  色：緑
} 
{body.firefox 
  フォント - 重さ：通常と、
}

選択した親要素が代わる＆言及します。

ネストされたプロパティ

など、国境半径、のborder-bottom、のborder-top、フォントサイズ、フォントの太さ、フォントファミリ、同じ名前空間を持つオブジェクトの属性、これらのCSSスタイルプロパティのプロパティをネストされた、これらは同じです以下のように、接頭辞は、非常に多くの時間を書くのは冗長だと思われるので、あなたは、ネストされた名前空間の同じセットを使用することができます。

DIV {
   / * 注統一名前空間を設定するには、追加する必要があります* / 
  ボーダー：{ 
   RADIUS：5pxの; 
   色：赤; 
   下：3px; 
 }   
} 
/ * CSSにコンパイル* / 
divの{ 
  ボーダー - RADIUS：5pxの; 
  国境 - カラー：レッド; 
  ボーダー - 下：3px; 
}