独学でHTML/CSS/Javascriptを学んだ素人がもう一度1から学びなおす Part2

Sass/Scssを使ってみる

cssについてはHTMLを多少学習した人であるなら、おそらくみんな最低限名前くらいは知っていると思う。しかし、Sassというものの存在は知らない人も多いのではないか。（私もその一人だった）

今回はSassの記述方法と特徴をまとめてみようと思う。

事前準備

+ Visual Studio CodeにLive Sass Compilerを追加しておく

サンプル用HTML

```html Document

Button

``` ※linkタグの参照先はファイル名.cssにしておきます。（ファイル名.scssをcssにコンパイルする為）

Sass

```sass $cWhite: white; $cBlack: black;

.btn{
background-color:$cWhite;
color:$cBlack;
border: 1px solid $cBlack;
padding: 10px 40px;
font-weight: 600;
cursor: pointer;
margin: 50px 0;
transition: all 0.5s;

&:hover {
    background-color: $cBlack;
    color: $cWhite;

}

}

入れ子の中の&(アンパサンド)は親セレクタを意味する。
(今回だとclassがbtnである要素がマウスオーバされた時のスタイルを指定)

<h3>通常のCSS（コンパイル後）</h3>
```css
.btn {
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 10px 40px;
  font-weight: 600;
  cursor: pointer;
  margin: 50px 0;
  transition: all 0.5s;
}
.btn:hover {
  background-color: black;
  color: white;
}

従来のcssだと、どのタグやclassに属しているかをそれぞれ分けて記載する必要があり、第三者には読みずらい点がある。一方Sassの場合、入れ子構造（ネスト）で記述出来る為、プロパティの記述されている箇所が一目瞭然。変なところでスタイルが重複したりしにくくなる。

感想

今回、初めてSass方式での記述をしてみたが、確かにこれはイケてる。 (サンプルの量が少なかったので、これだけだとメリットを感じずらいかもしれないが…) 自分と同じように初めて知ったという人は是非使ってみてほしい。