セレクタのネスト（入れ子）構造の記述
SassはCSSの記述を以下のようにネストして記述することができます。
親要素{
プロパティ:値；
子要素{
プロパティ:値；
}
}親要素に対する指示と、子要素に対する指示をまとめた記述になります。
もう少し具体的な記述例で見てみましょう。
header{
background-color: #f00;
h1{
text-align: center;
a{
color: #fff;
}
}
}上の記述はheaderに対する背景色の指定、header h1に対する行揃えの指定、header h1 aに対する文字色の指定をまとめた記述です。
このような形でCSSをまとめて記述することで、より記述がシンプルで分かりやすいものになります。
Sassを記述する際の注意点
通常CSSの命令が一行の場合命令の終わりにセミコロンは不要となります。
Sassでネスト構造を利用して記述をする場合は、親要素の命令が一行であっても命令の終わりにセミコロンが必要となります。
header{
background-color: #f00
h1{
text-align: center;
a{
color: #fff;
}
}
}上の記述の場合headerに対するbackground-color: #f00の終わりにセミコロンがないためエラーとなってしまいます。
プロパティのネスト構造の記述
セレクタだけではなくプロパティをネスト構造で記述することもできます。
a{
color: #fff;
font:{
size:45px;
weight:bold;
family:serif
}
}aに対する文字色の命令に続いて、font関連（font-size・font-weight・font-family）の命令をネスト構造で記述しています。
擬似クラスの記述
要素に対する疑似クラスの記述は以下のようになります。
a{
color: #fff;
&:hover{
color:#000;
}
}aに対する文字色の命令に続いて、疑似クラス:hover（マウスホバー時）の命令を記述しています。
変数の定義
Sassではプログラミング言語で使用される変数を使うことができます。
変数に良く利用する値などを入れておき、変数名で呼び出すことで記述ミスなどを防ぐことができます。
$変数名: 値;上のように $変数名: 値 の形で変数を定義します。
変数名は値の内容に沿ったものを任意で付けると良いでしょう。
$main-color: #ffcccc;上の記述で変数main-colorに#ffccccを代入しました。
定義した変数を呼び出すには以下のように記述を行います。
p{
color: $main-color
}