Sass

・Saasは、Cssよりも簡素に書ける。

html

<div id="header">

 <ul>

  <li>羅列する内容</li>

 </ul>

</div>

Saas

直感的に構造をかける

.header{

 width: 100%;

 ul{

 padding: 10px;

   li{

 font-size: 10px;

}

}

}

・hoverをより簡単に

html

<div>

<h1>タイトル<h1>

</div>

Sass

div:hover{

background-color: red;

}

・ボタンのお話

html

<div>

<span>ボタン</span>

</div>

Sass

span: active{

position: relative;

top: 7px;

box-shadow: none;

}

li{

font-size: 10px;

&:hover{

background-color: red;

}

}

・色がこうなるマウス

:hover{
opacity: 1;

}

・特定のとこだけ操作

<ul>

 <li>1</li>

 <li class="second">2</li>

<li>3</li>

</ul>

li {

font-size: 14px;

}

lii.second{

color: red; 

}

Sassなら

&.second{

color: red;

}