CSSをより効率的に書ける言語

拡張子は.sassになる。

https://www.youtube.com/watch?v=K5ux9DXzBzw

文字サイズ、色コードを変数で指定できる

これがかなり便利。カラーコードの値を覚えなくていいし、全体のカラーを変えたいときに

変数の値を変更するだけ。

入れ子でセレクタ管理できる

記述をすくなくできて、編集も簡単。

&:hover{          //&でセレクタを省略。hoverはマウスをかぶせたとき
opacity:1;        //要素の透明度を指定。0.0(完全に透明)~1.0(完全に不透明)
}

&:active{           //クリックしたとき
      position: relative;  //相対位置指定要素
      top: 7px;       //位置指定要素positioned elementsの垂直位置の決定に関与します。
//位置指定されていない要素には効果はありません。position:relativeのとき下に移動する距離

header > .container{
}
//headerの子要素のみを適用範囲とする。孫要素には適用しない。

メディアクエリの指定が楽

レスポンシブが早くなる。

変数や@mixinを使うので1か所で管理できる。

変数の値を変更すればどんな案件にも使いまわせる。

Live Sass Compilerという拡張機能で、簡単にCSSファイルにコンパイルしてくれる。