SCSSについて調べてみた

CSSをより記述しやすくするためにSCSSという効率化ができる言語について記事にしていきます。

SCSSでできること

最初にも書いたようにCSSの記述を効率化できるスタイルシート言語記法(拡張言語)の一つです。
CSSでは下記のように記述します。

.item{
  background: #ffffff;
  font-size: 12px
  color: #000000
}

.item a{
  color: #0000cd;
  text-decoration: none
}

基本的に一つ一つのセレクタごとに記述が必要であったり、同じ記述を繰り返さなければいけない場合もあります。（特にカラーコードは頻出ですよね）
SCSSでは同じ記述を繰り返さなくても済むよう様々な方法が用意されています。

1. ネストできる
2. 同じスタイルを何回も記述しなくても済む(変数を使用することができる)
3. あらかじめ配列に格納した値を取り出すことができる
4. モジュール化できる

他にも条件分岐で処理を変更できたり、コードを簡略化させることが得意な言語だなーと個人的に感想を抱きました。
上記のCSSコードをSCSSで記述すると

$color: #000000, #ffffff, #0000cd...　//配列の記述

.item{
  background: nth($colors, 2);
  font-size: 12px
  color: nth($colors,1)
 a {  //ここからネスト
    color: nth($colors,3)
    text-decoration: none
  }  //ここまでネスト
}

あらかじめ使用する色を格納したcolorsという配列を用いて呼び出したり、.itemセレクタにかかるaタグ部分も別にCSSを記述する必要がないので可読性をあげてくれます。
今回CSS自体が短く簡潔なものだったため、あまり短縮できたり可読性が上がったりの恩恵を受けているように思えませんが、実際のCSSは100行以上に渡る場合が多い上一つ一つのセレクタに対し記述が必要です。人間は少しでも楽したい生き物なので省略できることはなるべく省略したいですよね。
例えば、カラーコードであれば複数回記述している内どちらかの記述において4文字目と5文字がうっかり逆に入力していた、なんてこともあるかもしれません。そんな時に配列から呼び出せれば、複雑なカラーコードを何回も打ち込まずに済むためミスもグッと減ります。

また、ネストすることでセレクタ毎の管理も容易になり可読性も上がります。上記の例で言えばCSSでは.itemを2回打ち込んでますが、片方をうっかり.itenにしてしまい想定していたはずのレイアウトが崩れてしまう、なんてことも起こりうるわけです。（経験談です）

更に、通常CSSはスタイルシート1つで管理していきますが、SCSSはモジュール化が可能なため機能毎にファイルを分けて管理をすることも可能です。
CSSだとファイルはstyle.cssのみですが、SCSSを使用することでmain.scssとheder.scssとfooter.scssと別ファイルでCSSの管理をすることができ、どこにどんなCSSを適用させているかを管理するのが容易になるため修正したい場合にどこを参照すれば良いかもわかりやすくなります。
呼び出したい場合もstylesheet.css内に

@use "main";
@use "header";
@use "footer";

を記述することでそれぞれの記述を呼び出すことができます。

SCSSの注意点として.scssのファイルだけではレイアウトに反映されない、ということです。
CSSを効率的にする拡張言語のため、SCSS自体にはレイアウトに対する効力を持ちません。そのため反映するには.scssファイルを.cssファイルにする必要があります。（コンパイルと言います）
CSSは変数定義したり配列を使用することがそもそもできないため、SCSSで記述したものをCSSの形に改めて変換する作業が必要です。
それぞれのコーディングアプリの拡張機能を使用したり、ターミナルにてsassコマンドを実行しコンパイルする必要があります。（今回こちらは割愛致します。）

RubyでSCSSを適用させるには？

RubyでSCSSを適用させるにはgemのインストールが必要です。
と言っても、Gemfile内に#でコメントアウトされているgem "sassc-rails"の#を消し、ターミナルでbundle install`を実行するだけで、お手軽にSCSSを適用させることができます。

まとめ

・SCSSはCSSの拡張言語であり、繰り返しの記述を減らしたり、可読性の向上が見込める有用な言語である。
・あくまで拡張言語のため、SCSSで記述されたものをCSSにコンパイラする必要がある。
・Rubyにおいては使用するための準備がすでに組み込まれており、Gemfile内のコメントアウトを削除することで使用することができる。

ファイルを分けることができたり、変数や配列を使用したり、可読性がグッと上がる素敵な言語だと思いました。修正したい部分を探すのが容易になるのでSCSSをしっかり使いこなせるようにしていきたいですね！ちなみに私はVScodeを使用しているので、コンパイルするため拡張機能のLive Sass compilerを利用しています。ボタンひとつでコンパイルできるので超便利です。