SASSとは何かを解決!まずはSASSの概要をつかもう!!【使って覚えるSASS入門】

SASSとは何かを解決!まずはSASSの概要をつかもう!!【使って覚えるSASS入門】

【使って覚えるSASS入門】シリーズは、SASS入門者に向けたチュートリアルになっています。
「なんとなくSASSを使ってるけど、いちから学んでみたい!」
「SASSを使ってみたいけど、漠然としていてよく分からない。。。」
「SASSって食べ物?おいしいの?」
という方は、ぜひ参考にしてみてください!!

「SASSの使い方は分かるけど、実践で上手くいかない・・・」という方は、後日公開する【作って覚えるSASS実践】シリーズをご期待ください!!

SASSって結局なんなの?

みなさんはSASSをご存知でしょうか?
SASSは、簡単に言うと、CSSをもっと便利に、もっと機能的に使えるようにしたものです!

例えば、通常のCSSでは、同じような記述を再利用することは出来ません。

.icon-color {
  background-color: #e2d3ff;
}

.text-color: {
  color: #e2d3ff;
}

.border-color: {
  border-color: #e2d3ff;
}

上のコードでは、「#e2d3ff」が共通していると思います。
しかし、CSSでは「変数」を使うことが出来ないので、コピーして持ってくるしかありません。(実際はカスタムプロパティはあるけど説明の便宜上、割愛)
10行程度であれば、問題ないけど、1000行にもなると相当しんどいと思います。

このような、めんどうを解決してくれるのが、SASSになるのです!

ちなみにSASSで書くと、

$purple: #e2d3ff;

.icon-color {
  background-color: $purple;
}

.text-color: {
  color: $purple;
}

.border-color: {
  border-color: $purple;
}

このようになります。

「$purple」という変数に「#e2d3ff」を設定しました。
色の特徴(紫色)を変数名にすることで、ザックリとした色が分かるので、とても便利ですね!!
また、「この紫色、もうちょっと濃くしてくれない??」と言われても「$purple: #e2d3ff;」の1行を直せばいいのでとても楽になりました。

今回の例は、変数のみでしたが、SASSにはもっと便利な機能が用意されています。
※ここでは、まだ「なんのこっちゃ???」状態でも大丈夫です!!

【代表的な機能】

  • 変数
  • 配列
  • 関数
  • mixin
  • 繰返し(for)
  • 分岐(if)
  • ネスト

ザックリとした仕組み

SASSを使う際の大まかな仕組みとしては、次のようになっています。

  • ①SASSファイルに記述
  • ②SASSファイルをCSSファイルに変換(コンパイル)
  • ③CSSファイルをHTMLファイルに読み込む

SASSファイルは、ブラウザ上で使うことは出来ないので、CSSファイルに変換する必要があります。

SASSを変換するためには、様々な方法があります。

  • NPMのSASSを使う
  • rubyのSASSを使う
  • koalaなどのGUIツールを使う
  • ATOMやVScodeなどのエディタを使う

まだいくつかありますが、ザっとこんな感じですね!

この中でもNPMのSASSは、簡単に使い始めることができ、実際の業務でも使用する頻度が高いのでオススメです!!
このサイトでは、NPMのSASSを使って解説していきます。

SASS記法とSCSS記法

最後にSASSの記述方法について、触れていきます。

SASSには「SASS記法」「SCSS記法」の2つがあります。
ザックリとした違いは、下のようになっています。

構文拡張子
SASS記法section.class-name
 width: 100%
 height: 300px
 .class-name-inner
  background: black
.sass
SCSS記法section.class-name {
 width: 100%;
 height: 300px;
 .class-name-inner {
  background: black;
 }
}
.scss

簡単に言うと、SASS記法はインデントでグループを作り、「;」は不要になります。
それに対して、SCSS記法は波中括弧{}でグループを作り、「;」は必須になります。

SCSS記法の方が通常のCSSに近い書き方なので初心者には覚えやすいかも!

コードに表すとこんな感じになります!

// SASS記法
.wrapper
    width: 1000px
    margin: 0 auto
  .text
      font-size: 14rem
      color: #333

// mixin
= sample_mixin()
    font-size: 20px
    font-weight: 500

.title
    +sample_mixin()
// SCSS記法
.wrapper {
    width: 1000px;
    margin: 0 auto;
  .text {
      font-size: 14rem;
      color: #333;
  }
}

// mixin
@mixin sample_mixin() {
    font-size: 20px;
    font-weight: 500;
}

.title {
    @include sample_mixin();
}

この2つは記述方法が違うだけで、使える機能としては同じです。
なので、実際に書いてみてから好きな方を選ぶのが良いと思います。

個人的な感覚としてはSCSS記法をオススメします。

ネット上にはSCSS記法の方が多くあると思うので、困った際に調べやすいですね。
(この機能ってどう使うんだっけ?って時に便利です)

また、SCSS記法は通常のCSSを、そのままコンパイル出来るのも大きな利点です。
例えば、リセットCSSをどこからかコピーしてきた際に、ファイルの拡張子を「.scss」に変更するだけでSCSSとして扱うことが出来ます。

あとは、SASS記法は連想配列が扱いにくかったりするww

諸々の理由から、このサイトではSCSS記法を採用してみたいと思います。

第0回は、ここまでにしたいと思います!
次回の第1回は、NPMのSASSを使って、実際にコンパイルするところまでやるので、ご期待ください!!