Scss~変数~

それでは次に変数についてです！！
ここで『変数』とはなんぞやって方！！　一緒に振り返っていきましょう👍

①変数とは？？

変数は名前を代入して使います。
例えば、fruits = りんご　みたいな感じです。
イメージとしては、左側のフルーツが箱でその中に品物を入れていく感じですね👍
ただ、変数はその名の通り値が変わリます！！
ですから、優柔不断にあーでもないこうでもないってやってても怒られません笑
反対に代入したものを変えてはいけなものを定数と言います！これはもう絶対に変えられないので、fruitsの中にりんごを入れたらそのままお会計に行きます😂

では！！変数を理解できたとこで（できましたよね？）

Scssで使っていきましょう！！

main.scss

section {
  background-color: royalblue;
  .case1 {
    font-size: 40px;
    .case2 {
      font-size: 15px;
    }
  }
}

これが前回までの記述内容になっていますが、これを少し変えていきます！！
今、フォントサイズを指定してますが、これをベースは20pxで使ってね、でももし嫌だったら変えてねって意味で
変数を指定します！！
更に今回はわかりやすいように背景カラーも代入していきたいと思います！！

main.scss

$basefontsize:20px;
$background-color:orange;
section {
  background-color: royalblue;
  .case1 {
    font-size: $basefontsize;
    background-color: $background-color;
    .case2 {
      font-size: $basefontsize;
    }
  }
}

代入のときには"$"これを使います👍 代入はじめますよー！の合図です👌
あとは、コピーしてペタペタしていく感じですね😊
ブラウザで表示するとこうなります！

ちなみにエラーが起きるとこうなります🥲

でも優しいから、９行目のscss間違えてませんか？って教えてくれます😊