SCSSでできること
共通の部分を変数で設定できて、変更する必要が出たときに共通部分が一括で変更できて便利
変数の設定方法の例:$cBlack: black;
$cBlack: black;
$cWhite: white;
.btn {
background-color: $cWhite;
color: $cBlack;
border: 1pxsolid$cBlack;
padding: 10px40px10px40px;
font-weight: 600;
cursor: pointer;
margin: 50px0;
transition: color0.3sease1s, background-color0.3sease2s;
&:hover {
background-color: $cBlack;
color: $cWhite;
}
}上のようにネストすることもできてコードが見やすくなる。