【初心者向け】初めてのSass（SCSS）入門【Sassを使ってみよう】

本記事ではWeb制作初心者の方向けにSassの使い方入門を解説していきます。

対象は以下の方。

HTML/CSSはだいたい理解できた

「Sassをまだ触ったことがないがどんなものか知っておきたい」という方にこの記事が参考になればうれしいです。

※実際に手を動かしながら学ぶのがおすすめです

Sassとは

Sass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。
メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。
　-Sass（SCSS記法）の書き方紹介 – BRISK –

簡単に言うと、CSSをもっと簡単に書けるようにした言語のことです。「なんか便利なCSSなんだな」くらいの理解でオッケー

SASSとSCSSについて

Sassには、SASS記法とSCSS記法というのがあります。

二つの違いは書き方です。実際に見てもらったほうが早いと思うので下記。

SASS

.box
 background: red;
 color #fff;
 .heading
  font-size: 24px;
  font-weight: bold;

SCSS

.box {
 background: red;
 color: #fff;
.heading {
  font-size: 24px;
  font-weight: bold;
  }
}

SASS記法の特徴は以下。

波括弧がない
コロンを省略できる

が！覚えるのはSCSS記法だけでOKです。SASS記法は実際あまり使われてない。

というわけでこの記事ではSCSS記法で説明します。

どうしてSassを使うの？

→CSSファイルに書いていくよりも、楽に・効率よく記述できるから。

これに限ります。

制作会社やチームでは、CSSに直書きすることはほとんどありません。そのため、これからWeb制作の現場で働くのであればSassは必修科目であるといえます。

学習コストはマジで低い

新しい言語を覚えるのってなんか大変そう…

と思われるかもですが、学習コストはマジで低いです。簡単です。というか、ほぼCSSなので怖がらなくてOK！

この記事では実際に手を動かしながら学んでいくことをおすすめします。

Sassに触れてみよう

ではでは早速やっていきましょう、まずはSassがどんなものか触ってみます。

下記のサイトはSassの使い方を実際に試せるものです。

https://www.sassmeister.com/

こちらを開いて、実際にSCSS記法でコードを書いてみます。

下記を左側の画面にコピペしてみてください。

.container {
  background: red;
  color: #fff;
  h2 {
    background: #fff;
    color: #333;
  }
}

そうすると右側の画面にCSSに変換されたコードが出てきます。

と、こんな感じでCSSだったら2つに分けて書かないといけないコードもSCSSなら1つにまとめて書くことができます。便利だねい。

入れ子にしてセレクタを指定できる、これがSassのキホンです。

Sassを実際に使ってみる

なんとなく理解できたところで、自分のローカル環境でもSassを使いましょう。

必要な環境

エディタ：Visual Studio Code

まずはSassを動かせる環境を用意します。適当なプロジェクトフォルダを用意しておいてVscodeで開きましょう。

手順１：live Sass Compilerを導入する

拡張機能のタブから「live Sass Compiler」を検索して一番上に出てくるのをインストールします。

有効にしたら準備はOK。

手順２：style.scssでコードを書いてみる

では実際にコンパイルしてみましょう。

フォルダ内に「sass」というフォルダを作り、その中にstyle.scssを作成します。作成したファイルに下記をコピペします。

.container {
  background: red;
  color: #fff;
  h2 {
    background: #fff;
    color: #333;
  }
}

これで準備はできたので、画面右下のlive Sassを押してみてください。そうするとコンパイルされたstyle.cssが生成されるはずです。

うまくできたら、「Watch Sass」が「Watching…」に変わるはずです。生成されたCSSファイルの中身を見ると下記のようにコンパイルされてることがわかると思います。

もっとSassに触れる

さてさて、Sassの動きが若干理解できたところでさらにSassを使いこなしていきましょ。Sassのよくある使い方を紹介します。

子セレクタ・隣接セレクタ

Sassでは子セレクタ（>）や隣接セレクタ（+）も入れ子で書くことができます。

親セレクタを参照する（アンパサンド【＆】）

&（アンパサンド）を使用することで親セレクタの名前を参照することができます。

たとえば下記のような書き方ができます。

.heading {
  &:hover {
    opacity: 0.7;
  }
  &::before {
    content: "";
  }
  &::after {
    content: "";
  }
}

出力結果は以下のようになる。

.heading:hover {
  opacity: 0.7;
}

.heading::before {
  content: "";
}

.heading::after {
  content: "";
}

疑似要素のスタイルを指定する際によく使います。非常にベンリなのでこれだけでも覚えてもらいたい！！

余談ですが、このような記法はCSS設計のBEM記法で重宝します。今わからなくてもOK！

メディアクエリの入れ子

@media screen and (max-width: 767px) {
  .heading {
    font-size: 18px;
  }
}

CSSでは、上記のようにメディアクエリの中にコードを書きますね。しかし、この書き方は項目が増えるといくつもメディアクエリができちゃって管理が大変です。

Sassでは以下のように書けます。

.heading {
  font-size: 24px;
  @media screen and (max-width: 767px) {
    font-size: 18px;
  }
}

こんな感じでセレクタ内にそのまま書ける。管理もしやすくなるし、読みやすいぜ！！

まとめ

というわけでこの記事では初心者のためのSassについて解説しました。

実はSassというのはもっとできることがあります。それは次回以降でまた解説していきます、

づみ

疑問な点はコメントもらったら答えまっせ＾＾