サスは、私たちのために、操作の便利なモードが用意されています。ネストされました。サス、ネスティングモードの三種類の合計：
（1）セレクタネスト。
例えば：
$color1:red;
$color2:green;
$color3:blue;
body
{
color:$color1;
.column
{
color:$color2;
.content-title
{
color:$color3;
}
}
}
CSSコードでコンパイルされました：
body
{
color
:
red
;
}
body .column
{
color
:
green
;
}
body .column .content-title
{
color
:
blue
;
}
短所：
この方法は、操作しやすいネストされたセレクタですが、大きな欠点がありますが：CSSコードにコンパイルネストされた階層より深いレベルセレクタも深いです。このネストされたCSSスタイルは冗長と維持が困難になることができます。サスを書くために、ネストされた方法で、セレクタの使用を最小限に抑え
（2）特性をネスト、同じプレフィックスうち。
例えば：
{
width:100px;
height:100px;
font:
{
family:Arial;
size:14px;
weight:bold;
}
}
次のようにCSSコードでコンパイルは以下のとおりです。
div
{
width
:
100px
;
height
:
100px
;
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
ネストされた性質のために、私たちは特別に支払う
という事実に注意を
：
プロパティには、コロンを追加しなければなりませんネストされた接頭辞の後に必要「：」、そうでない場合、コンパイラは、我々は結果を望んでいないでしょう。
（3）擬似クラス、ネストされたまたはネストされた擬似要素。
サスでは、入れ子の方法がある：擬似クラス、ネストされたまたはネストされた擬似要素。擬似ネストされたクラス（または擬似ネストされた要素）のような特性を有するネストされ、それは一緒に使用される「＆」記号が必要です。
一般的な擬似要素は、すなわち::前に、4つしかあり::後、::最初の文字を、::最初の行
例：ネストされた疑似クラス：
$color1:red;
$color2:green;
a{
color:$color1;
&:hover
{
color:$color2;
}
}
CSSコードでコンパイルされました：
a
{
color: red;
}
a:hover
{
color: green;
}
擬似ネストされたクラスは、コンパイル時、達成するために「＆」記号と組み合わされる「＆」は、対応するセレクタに置き換えられます。
例：擬似ネストされた要素
.clearfix
{
*zoom:1;
&:after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
}
CSSコードでコンパイルされました：
.clearfix{*zoom:
1;}
.clearfix::after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
擬似結合要素は、コンパイル時間も達成する「＆」記号が含まれている「＆」は、対応するセレクタに置き換えられます。これは、最も一般的に使用される方法の上に浮い削除することです