おにちゃん塾の商品一覧*準備中

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

【入門】Sass(SCSS)とは?使い方・メリットを詳しく解説
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • Sass(SCSS)ってなに?
  • Sass(SCSS)のメリットを知りたい
  • Sass(SCSS)の使い方について知りたい

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

おにちゃん

執筆者:2020年11月中旬からプログラミングの学習をはじめました。

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


本記事の内容

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

(スポンサーリンク)

目次

Sass(SCSS)とは何なのか

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(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)の使い方

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

Sass(Scss)の使い方

  1. RubyをインストールMac不要
  2. Sassをコマンドでインストール
  3. コンパイラをコマンドで実行
おにちゃん

おにちゃん塾を含め色々なサイトでは、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)を本格的に学びたい方は動画教材を活用しよう
Sass(SCSS)を本格的に学びたい方は動画教材を活用しよう

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

おにちゃん

僕の考え:お金があるならスクールに通う。お金がないなら有料動画教材

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

おにちゃん塾がおすすめしているSass(SCSS)の動画教材は上記のものです。


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

おにちゃん塾ではSassの使い方をコードを交えて解説しています。

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


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

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

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

本記事のまとめ
  1. Sass(SCSS)とは、CSSを効率的に記述するための言語
  2. Sass(SCSS)を使うメリットは、効率的に記述できるようになる
  3. Sass(SCSS)の使い方はVScodeがおすすめです。
おにちゃん

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


読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる