SCSSで快適コーディング

今､サンプルサイトを作っています｡

なんてことはない1カラムのレイアウト｡

ホームページを作る方法は色々とありますが､Webデザインする上で､HTMLコーディングは欠かせないモノですね｡

HTMLコーディングとは､HTML､CSS､jQueryなど範囲が広いです｡ぼくは､ハンバーガーメニューだけjQuery を使っています｡

あとは､HTMLとCSSでWebデザインをしています｡

今日はCSSにスポットを当てます｡

CSSは奥が深く､書き方もシンドイ｡たとえば､こんな感じですね｡

a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  text-decoration: none;
}

いちいち､｢a｣を書かないといけません｡ところが､SCSSだと以下になります｡

a {
  color: #000;
  text-decoration: none;
  &:hover {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
  }

  &:visited {
    text-decoration: none;
  }
}

一見､｢あまり変わりないやん（笑）｣となりますが､aを書きまくらなくても良いというメリットがあります｡

（&を書きまくってるやん笑）｡

しかし､個人的には､SCSSで書いた方が楽だということが判明しています｡

なお､SCSSはコンパイルしないといけません｡単にSCSSを書いて反映させることは不可能です｡

｢vscode scss｣で検索するとたくさん表示されますので､参考になさってください｡

ぼくは､vscodeでSCSSを書いています｡

vscodeは一推しのモノとなっています｡おそらく､HTMLコーディングをしている人だったら､名前くらいは知っていると思われます｡

じつは､ジンドゥーでホームページを制作していて､独自レイアウトでCSSを書く機会が増えました｡

SCSSで慣れていたので､CSSを書くのがしんどかったです｡やはりSCSSは偉大だ｡

何か新しい方法でHTMLコーディングをしたいと思っている方は､SCSSをお試し下さい｡

ちょっとした癖がありますが､慣れたら､普通のCSSを書くのはシンドイと思うでしょう｡