Sassについて

SassとScssとは

CSSをより簡略化したメタ言語です！
この２つの共通点は入れ子構造で書くことです。

index.html

<div class="header">
 <div class="header-logo">Sassについて</div>
</div>

style.css

.header {
 heigth:90px;
 color:black;
}

.header-logo {
 font-size:40px;
 border-bottom:4px solid black;
}

と入力するとしましょう。
これが普段のcssの入力の仕方ですね👍

Sassの場合は、少し記入の仕方が変わります。

atyle.scss

.header
 heigth:90px
 color:black
 .header-logo
  font-size:40px
  border-bottom:4px solid black

となります。
ちなみにScssで書く場合はこうなります。

style.scss

.header {
 heigth:90px;
 color:black;
 .header-logo{
  font-size:40px;
  border-bottom:4px solid black;
  }
}

みたくなる。
HTMLの親要素と子要素に共通する書き方ですね。つまり入れ子です。
ちなみにcssであたっていない場合はデベロッパーツールで確認しますが、これら（以下sass）は、崩れて画面真っ黒、そして黒い画面でエラーを訴えてくるのですね🥲

以上がSassの説明でした。
次の記事では導入について書いていきます👍