なるほどSassという話。

はじめに

昔知り合いの方にSassが便利だの言われていました。
今回はSassをほんの少し学習したのでアウトプットします！

Sassってなんですか？CSS？？？

Sassで不思議に思っていたのは、「Sass」と「Scss」の
2種類の書き方があって少しめんどくさそうだなと思っていましたが実際はめんどくさくなくて便利でしかありませんでした！

Sass記法はセレクタやクラスの後に{ }を使わないでインデントで書いてくみたいです。

Scss記法はCSSの書き方で入れ子にしていく書き方です！progateで学習している自分はこのScssの書き方でやってきます！

Sassのメリット

-　CSSよりも記述量を減らせる
-　コードを再利用できる
特に記述量を減らせるのは何よりもありがたいですね！

Sassの書き方

qiita.scss

    .button {
     display: inline-block;
     padding: 8px 24px;
     color: white;
     opacity: 0.8;
     background-color: #f778b8;
     box-shadow: 0 5px #e04893;

      &:hover{
       opacity: 1;
       }

      &:active{
       position: relative;
       top: 7px;
       box-shadow: none;
       }
    }

こんな感じです！buttonクラスの中にhoverとactiveがネストされてます！
ポイントは「&」ですねー、&つけると「button：hover」みたいになります！

なのでボタンの上にカーソルが乗っかると透明度が変わって、ボタンをクリックするとactiveの変化が起きます！

結論

Sass学習する前はcssの学習無駄になるのかな？とか思ってたりしてましたがとんでもないですね！
これからもSass使ってきます！！