SASS(SCSS)は必要なの？ #CSS

これまでHTML/CSSで普通に難なくコーディングしていたのだが、 Railsアプリのインターフェース作成時に、hamlとscssを使うことになった時に思ったことが......

わざわざhamlとscss記法を学習し直してまでやる必要あるのか！？！？

そこで今回は、なぜSASS(SCSS）で記述するのが良いのか考えていこうと思う。

SASSとは

まずSASSってなんなんだっていう話から

SASSは Syntactically Awesome Style Sheet　の略称であり

簡単に訳せば「文法的にかっこいいスタイルシート」という意味になる。

つまりは、普通にcssを書くよりは見栄えがよくなるよっていうことなのかな

た

header {
   background-color: gray;
   height: 50px;
   width: 100%;
}

header .header__white {
   font-size: 20px;
   background-color: #fff;
   font-weight: bold;
}

header .header__black {
   font-size: 20px;
   background-color: #black;
   font-weight: bold;
}

となっていれば

header {
   background-color: gray;
   height: 50px;
   width: 100%;
     &__white {
         font-size: 20px;
         background-color: #fff;
         font-weight: bold;
     &__black {
         font-size: 20px;
          background-color: #black;
          font-weight: bold;
}

という風に、ネストを使ってコンパクトに記述できるというところがAwesomeなところのひとつであろう。

フォルダで分割管理

もうひとつAwesomeな点は、モジュールごとに必要なCSSをフォルダを分けて管理することによって、
１つ１つのフォルダを短くスッキリまてめる事ができる。

スタイルごとの管理もできるので、後からのデザイン変更や追加を行ないやすくなる。

でもコンパイルがめんくさい・・・

そもそもSCSSを書いたところで、そのままではHTMLに適用されないのです。
CSSファイルへのコンパイルをする必要があります。

でもいちいちCMDやターミナルにコマンドを入力するのは手間がかかるなあ・・・

それなら最初から直接CSSを書き込んでもよかったのでは・・・・とも思ってしまいます。

でもそんな心配なんぞご無用で、ちゃんとコンパイルを自動化してくれるアプリや拡張機能が多く出回っているのです。

自分はVSCodeを使用しているので、拡張機能の'Live Sass Compilerがとても便利！

使い方、DL方法は下記リンク参照
https://asamone.com/2018/09/30/sass-vscode/

結論

今回はあまり深掘りができなかったが、まだSASSには色々な便利機能があって、試す価値は大いにあると思う。

自分が思うに、小規模なアプリを自分一人で作成する分には、SASSを覚える必要はないかもしれない。

しかしながら、チームで開発するとなった時のソース管理の複雑さを少しでも簡便にするためにも、
他の人のことを思い合って書くAwesomeなコードが書ける事が望ましいかもしれない。