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を書くのはシンドイと思うでしょう。


この記事が気に入ったらサポートをしてみませんか?