SCSS・SASSがとても便利なので基本的な使い方をご紹介します

SCSS・SASSはご存知でしょうか？CSS言語をより効率よく書ける拡張言語で、最近では、多くの制作会社でも使用されているかと思います。

関連記事：【初心者向け】CSSとは？書き方や優先順位などを解説

関連記事：CSSが反映されない・適用されない原因とは？効かない時の対処法を解説！

「また新しい言語を勉強しないといけないのかよ～…。」という声が聞こえてきそうですが、CSSが書ける方なら、覚えるのにさほど時間がかからないはずなので、ご安心頂ければと思います。

※もちろん、個人差はあります。

今回SCSS・SASS、主にSCSSについて基本的な使い方を簡単にご紹介したいと思います。

そもそもSCSSとは

SCSS・SASSとは、CSSを効率良く記述するための拡張メタ言語としてRubyより作られた言語となります。

SCSSとSASSの違いについて

このSCSSとSASSですが、厳密には違うもいのとなっており、その違いは以下のようになります。

SCSSとSASSの違いは、書き方であり、SCSSの方が一般的に使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSの方がスタンダードになっているのは当然の流れとも考えられます。しかもSCSSなら、SCSS独自の書き方だけではなく、いつも通りのCSSを書くことも可能なため便利です。また、SCSSとSASSの違いとして、当然である部分ですが、拡張子が異なることも挙げておきます。SCSSが「.scss」であることに対し、SASSは「.sass」です。書き方については、後ほど触れていきますが、大きなポイントとしては、SCSSがカッコ（{ }）を使い、入れ子構造を記述できるところでしょう。

引用元はこちら：https://ferret-plus.com/12503?page=2

SCSSの良いところ

SCSSを使うと、CSSの効率が上がるというのは先程から説明していますが、では、どう便利なのか？というところについてまとめてみました。

ネスト構造(入れ子構造)が出来ます

一見「どこが便利なの？」と思えそうなこのネスト構造を利用した記述方法ですが、これがどう便利なのかと説明すると、HTMLの階層が深い要素に対してスタイルを当てる際に、セレクタがその都度長くなるのですが、SCSSならネストが利用できますので、記述量が減ります。

CSSの記述方法

.hoge{
  width: 200px;
}

.hoge div{
  font-size: 2.4rem;
}

SCSSの記述方法

.hoge{
  width: 200px;

　div{
    font-size: 2.4rem;
  }
}//.hoge　 ←1行だけのコメントであれば「//」が使用できます

このように階層が深くなるたびCSSでは毎回「.○○～」と書かないといけなかったのが、ネスト構造によって省略できるので実際に書いていると、とても便利です。

SCSSでは変数が使用できます

SCSSでは変数が使用できますので、例えば、カラーの定義をしたり、数値を変数に代入しておくと、後で変更になっても一括で変更がかけられます。

再利用をする部分に使うと便利でしょう。

変数の例

$color: #f00;  //変数を使用するには、$マークを使います
.hoge{
  background: $color;
  width: 200px;

　div{
    border: 1px solid $color;
  }
}//.hoge

条件分岐や繰り返し分など、関数が使える

SCSSでは、if分や関数なども使えるところも特徴の一つです。

$h-num: 6;
@for $i from 1 through $split-grid {
  h#{$i}{
    
  }
}

構文が書ける人には馴染みがあると思いますが、恐らく小規模のサイトをスクラッチで組むようなケースだとここまで使う事はあまり無く、どちらかと言うと自作でフレームワークの開発する場合に使用する事が、実際のケースでは多いかもしれません。

@mixin・@extendを使うととても便利

SCSSの最大の特徴と言っても過言ではないでしょうか。

この@miixnとは、プロパティ自体を定義でき、使う際には@includeで呼び出すだけなので、とても便利です。

@mixin・@includeの使用例

@mixin box {  // @mixinの後に名前を付けます
  width: 1200px;
  margin: 0 auto 30px;
}

.container{
  @include box;//  mixinで付けた名前を呼び出すだけ
}

CSSでの出力結果

.container
  width: 1200px;
  margin: 0 auto 30px;
}

@extendでは、セレクタごと継承します

@mixin・@includeの他に、@extendっではスタイルそのもの、つまりセレクタをそのまま継承する事ができます。

予め再利用するスタイルを決めておいて、使い回すと、変更も一箇所だけで済むので、便利ですね。

.container {
  width: 1200px;
  margin: 0 auto 30px;
}

.box{
  @extend .container;//  //@extendの後に、セレクタ名を書きます
}

SCSSを使うには？

SCSSについての便利な特徴を説明いたしましたが、じゃあSCSSを使うには何が必要なのか？それを、ご説明します。

Rubyをインストールします

SCSSを使うにはRubyのインストールが必要になります。

※Macを使用されている方は標準で入っているので、Windowsユーザーは、Rubyをダウンロードしましょう。

また、SCSSはコンパイルが必要です

CSSファイルでれば、HTMLとリンクをして使用できるのですが、SCSSはそのままでは使用できず、コンパイルというCSSへ変換をする作業が必要になります。

このコンパイルですが、手動でできるのですが、ツールを使うと便利でしょう。

Dreamweaverだと自動でコンパイルしてくれます

私個人の使用感としてですが、以前はSCSSのコンパイルにはKoaraというコンパイラーツールを使用していたのですが、DreamweaverがSCSSを自動コンパイルしてくれるようになったため、SCSSファイルを保存するたびに、自動でコンパイルをするため、とても助かっています。

またコンパイラー自体は、Koara以外にもありますので、お好きなツールを使うと良いでしょう。

SCSSの基本的な使い方のまとめ

いかがだったでしょうか？

SCSSはCSSが書ける方なら習得までに時間もそほどかからず、覚えるととても便利で作業効率も上がりますので、機会があれば、習得を検討してみてはいかがでしょうか？

他にも便利な昨日や使い方はいっぱいあるのですが、今回は基本的な使い方にフォーカスしていますので、また次回にご紹介できればと思います。