【入門】Sass(SCSS)とは？使い方・メリットを詳しく解説

本記事は、上記の方に向けて執筆しています。

SassのSCSS記法は、よく使われる手法なので必ず理解できるようにしましょう。

本記事の内容

1. Sass(SCSS)とは何なのか
2. Sass(SCSS)を使うメリット
3. Sass(SCSS)の使い方

Sass(SCSS)とは何なのか

Sassとは、一言でいうと『CSSを効率的に記述するための拡張スタイルシート』です。

Sassはメタ言語(特定の言語を拡張するための言語)の一種です。

Sassを使いこなせると、CSSで記述していた時よりも大幅に時間を短縮することができます。

また、変更点をすぐに見つけられる＋修正点が少ないメリットもあります。

実際に、取り入れてみるとSassの凄みに気づけるはずです。

SASSとSCSSの違い

便利なSassですが、実は2つの記述方法があります。

Sassの記述方法：2パターン

• SASS記法
• SCSS記法

SASS記法の方が記述量が減るのですが、CSSとは別言語みたいな使い方をするのであまり人気がありません。

それに比べて、SCSS記法はCSSに似ているので、一般の方に普及しています。

本記事含め、Sass＝SCSS記法がスタンダードですので、記事を読む際にSassと出てきたら『SCSS記述の話だね』と思うようにしましょう。

ファイルの拡張子
SASS→.sass
SCSS→.scss

Sass(SCSS)を使うメリット

Sass(SCCS)を使うメリットは下記のとおりです。

ネスト(入れ子)が扱える

Sass(SCSS)を使うメリット1つ目はネスト(入れ子)が扱える点です。

CSSで記述する場合には、ネスト扱えないのでかなり不便でした。

例えば、下記のような不便がありました。

.button {
//記述
}
.button .text {
//記述
}

もし、クラス名であるbuttonを変更したい際には下記のように2つ記述する必要がありました。

.main_button {
//記述
}
.main_button .text {
//記述
}

上記のように.button配下のコードが増えればこの手間はもっと増えます。

しかしSCSSではこの問題を鮮やかに解決してくれています。

.button {
　//記述
　.text {
//記述
　}
}

変数が扱える

Sass(SCSS)を使うメリット2つ目は変数が扱える点です。

変数が扱えると、変更に強いサイトを簡単に作れます。

通常のサイト

• メインカラー
• サブカラー
• アクセントカラー

上記のように3つほど色を設定します。

色を変更せずに運営するのであれば、従来のCSSで問題ないのですが、大半のサイトが色を変更したいと考えるはずです。

CSSで変更しようとすると、すべてのコードを読んでいきながら修正していく必要がありますがSass(SCSS)では違います。

$site-color: blue;

.box {
Background: $site-color;
}

このように変数として、最初に設定し、その後は値に変数を入れていくだけで、変更に対応しやすいサイトを作成することができるのです。

ファイル分割が扱える

Sass(SCSS)を使うメリット3つ目はファイル分割が扱える点です。

• ヘッダー用のスタイル
• メイン用のスタイル
• フッダー用のスタイル

などのようにご自身の目的に合わせてSass(SCSS)ファイルは分割することが可能です。

規模の大きなサイトを運営しているとこのファイル分割はかなり助かります。

唯一のデメリットは学習コスト

ここまでSass(SCSS)のメリットを解説してきましたが、実はデメリットもあります。

→学習コストが生じてしまう。

SCSSはCSSに似ているメタ言語ではありますが、一週間程度の学習を要するでしょう。

ただ、一週間しっかりと学ぶことができればこれまでより効率的に記述できるようになりますので、ぜひSASS(SCSS)を取り入れてみてください。

Sass(SCSS)の使い方

通常の場合は下記の方法でSass(Scss)の開発環境を整えます。

Sass(Scss)の使い方

当サイトを含め色々なサイトでは、VScodeで環境を整えていますので、本記事ではVScodeでの使い方を簡単に紹介します。

使い方1：VScodeでSassの環境を準備する

1. Sass(Scss)の使い方
2. VScodeをインストール
3. Live Sass Compilerをインストール

VScodeはインストールしてある前提で解説していきます。

まずはVScodeを開き【拡張機能】をクリックしてください。
*画面左側のアイコンの一番下のアイコンです。

拡張機能の検索窓に【Live Sass Compiler】と入力して下記のアイコンのものをクリックし【インストール】をクリックしましょう。

これで拡張機能のインストールは完了です。

使い方2：Sassを使えるようにする

Sassを使うために一度作業フォルダを作成しましょう。

new作業フォルダを作成

• index.html
• cssフォルダ
  --index.scss

//index.scss
header {
  width: 100%;
  height: 70px;
  background: red;
  .text {
    color: white;
  }
}

上記のように.scssファイルに記述し終えたら、【Watch Sass】をクリックしましょう。
*VScodeの下に表示されているはずです。

クリックすると、VScodeが自動的にファイルを生成してくれます。

これにてSass(SCSS)の使い方：準備は完了です。

Sass(SCSS)を本格的に学びたい方は動画教材を活用しよう

Sass(SCSS)を本格的に学びたい方はUdemyを活用しましょう。

上記のように考えています。動画教材は1000円程度でスクールで教えてもらえる内容を理解できるので、個人的にはかなりおすすめしています

• CSSを効率的に書く！フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
• プロになる基礎から実践まで！WebデザインからHTML5・CSS3（Sass）でのコーディングを全て学べる講座

当サイトがおすすめしているSass(SCSS)の動画教材は上記のものです。

Sass(SCSS)を無料で学習したい

当サイトではSassの使い方をコードを交えて解説しています。

無料で学習したい方は下記の記事を参考にしてみてください。

あわせて読みたい

【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】 本記事では、上記の方に向けて『Sassの基本的な書き方』について詳しく解説しています。 本記事の内容 Sassの基礎知識Sassの開発環境を整えるSassの基本的な書き方 Sass...

まとめ：Sass(SCSS)とは？使い方・メリット

ここまでで『【入門】Sass(SCSS)とは？使い方・メリットを詳しく解説』でした。

本記事は以上です。最後までご覧いただきありがとうございました。

読者におすすめの記事

あわせて読みたい

HTMLとCSSを独学で習得するためのロードマップ【本・サイトも紹介】 HTML/CSSとは独学で習得する方法を知りたい独学で学ぶ上で経験者の話を聞きたい 本記事では『HTMLとCSSを独学で習得したい方』に向けて記事を制作しています。 本記事の...

あわせて読みたい

【HTML/CSS編】Progate(プロゲート)の次にやるべきこと一覧 Progateの次に何をやるべきか分からない→プログラミング迷子です。 ほとんどの方が経験する『プロゲートの次に何をやれば良いのか』を本記事で詳しく解説していきます。...