■対話式シェル（対話モード）
Sassスクリプトは対話式シェルを使って簡単に試すことができます。シェルを起動させるにはコマンドラインで -i をつけてSassを実行します。プロンプトが表示されたら、結果を出力するSassスクリプト構文を入力します。

---------------------
▼コマンド
$ sass -i
>> 1px + 2px * 3
7
>> #777 + #888
white
>> #666 / 2
#333333
>> lighten(#cf2d3a, 30)
#eca9ae
>> type-of("Hello, Sassy World!")
"string"
---------------------


■変数: $
数とは、予め好きな名前（変数名）と値を代入しておくことで、任意の場所で変数名を参照して、値を呼び出すことができる機能です。変数はドル記号から始まり、プロパティのように定義することができます。

---------------------
▼Sass
$red: #cf2d3a;

.notes {
	color: $red;
}
.notesBox {
	border: 3px double $red;
}
---------------------
▼CSS（コンパイル後）
.notes {
  color: #cf2d3a;
}

.notesBox {
  border: 3px double #cf2d3a;
}
---------------------

変数は、ルールセットの中で宣言すればその中で有効になり、ドキュメントルート（どのルールセットにも属さない）では、すべての場所で有効になります。


■データタイプ
Sassには、値に関してデータの型が定義されています。現在のSassには次の6種類のデータタイプがあります。

・Number型（数値）
・Color型（色）
・String型（文字列）
・Boolean型（真偽）
・List型（リスト）
・Null型（空の値）


■演算
Sassでは、基本的な四則演算をサポートしています。

---------------------
▼Sass
// 足し算
.example01 {
	width: 500px + 80;
}

// 引き算
.example02 {
	width: 500px - 80;
}

// 掛け算
.example03 {
	width: 500px * 8;
}

// 割り算
.example04 {
	width: (500px / 8);
}
---------------------
▼CSS（コンパイル後）
.example01 {
  width: 580px;
}

.example02 {
  width: 420px;
}

.example03 {
  width: 4000px;
}

.example04 {
  width: 62.5px;
}
---------------------


■色の演算
色に対しても、演算が使えます。色の演算は、RGB値の上限を超える場合上限値が適用されます。次の例の場合、p要素の結果は 上限値の white（#fff） になります。

---------------------
▼Sass
a {
	color: #000 + #111;
}
p {
	color: #666 + #eee;
}
---------------------
▼CSS（コンパイル後）
a {
  color: #111111;
}

p {
  color: white;
}
---------------------


■文字列の演算
+ の演算は文字列の連結にも使うことができます。

---------------------
▼Sass
p:after {
	content: "今日は、" + 寒いです。;
	font-family: sans- + "serif";
}
---------------------
▼CSS（コンパイル後）
p:after {
  content: "今日は、寒いです。";
  font-family: sans-serif;
}
---------------------


■関数
Sassには予め用意された関数が有り、引数からデータを受け取り予め定められた処理を実行してくれる機能です。
---------------------
▼Sass
body {
	background: lighten(#000, 30%);
}
section {
	$margin: -15px;
	margin-left: abs($margin);
}
---------------------
▼CSS（コンパイル後）
body {
  background: #4d4d4d;
}

section {
  margin-left: 15px;
}
---------------------


■インターポレーション: #{}
変数を #{} で囲うことで、変数が参照できない場所でも使うことが出来るようになる機能です。

---------------------
▼Sass
$name: notes;
$attr: border;
p.#{$name} {
	#{$attr}-color: blue;
}
---------------------
▼CSS（コンパイル後）
p.notes {
  border-color: blue;
}
---------------------


■変数の規定値: !default
変数の値の後に !default フラグを指定することで、変数にデフォルト値を割り当てることができます。この際、すでに変数が割り当てられていた場合、再度割り当てられることは有りません。
なお、変数がnull値を持つ場合、値は未割り当てとして扱われ、!defaultの値が用いられます。

---------------------
▼Sass
$radius: 10px;

%kadomaru {
	$radius: 5px !default;
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

.item {
	@extend %kadomaru;
}
---------------------
▼CSS（コンパイル後）
.item {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
---------------------