1. トップ
  2. Webデザイン
  3. 【入門編】Sassの意味は?SASS・SCSSとは?読み方から使い方まで解説

【入門編】Sassの意味は?SASS・SCSSとは?読み方から使い方まで解説

「Sass」とは、CSSを拡張して扱いやすくしたスタイルシートのことです。この記事では、Sassとは何か、基本的な知識やメリット、インストール方法、使い方などを解説します。Webデザイナーとしてスキルアップしたい方は、ぜひ参考にしてください。

Sassの読み方・意味を入門者向けにわかりやすく解説

「Sass(サス、サース)」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。

なお、CSSについて、詳しくは「CSSとは?これを読めば初心者でも必ずCSSが書ける!」をご覧ください。

Sassはメタ言語です。メタ言語とは、ある言語に別のルールを定義するために使われる言語のことです。拡張言語と呼ばれることもあります。

SassはCSSのメタ言語で、効率的にCSSを記述するための言語であり、Webサービスを手掛ける多くの大企業が導入しています。

Sassを導入するメリットとは?

Sassを導入するメリットは、以下の5つです。

  • 入れ子の使用が可能
  • 変数を利用できる
  • 四則演算が可能
  • 関数を使用できる
  • ミックスイン・継承による効率化

それぞれのメリットについて見ていきましょう。

  • 入れ子の使用が可能

ネストと呼ばれる入れ子の構造で記述します。

CSSでは、それぞれのセレクタが独立して記述されていますが、Sassはネストを使い、子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能です。親と子の関係性がわかりやすいので、可読性が高まります。

  • 変数を利用できる

Sassでは、変数を利用できます。

通常、CSSで変数を使うことはできません。しかし、Sassはローカル変数とグローバル変数を利用することが可能です。例えば、グローバル変数の場合、スタイルシートに横幅のサイズを宣言し、その後セレクタの宣言の中でプロパティに代入することができます。
同じ値をさまざまなプロパティで複数使う場合などで、非常に便利です。また値を変更したい場合も、グローバル変数の数値だけを変更すれば、すべてのプロパティに適応されるため、メンテナンス性も向上します。

  • 四則演算が可能

Sassでは、四則演算の利用が可能です。つまり、値を足したり掛けたり、割ったりすることができます。変数と組み合わせることで、便利に利用することができるでしょう。

  • 関数を使用できる

関数を利用できる点もSassのメリットです。引数に値を入れることができ、そして処理後の値を返してくれます。

  • ミックスイン・継承による効率化

ミックスインや継承を利用できる点もメリットです。

ミックスインとは、スタイルに引数を持たせることです。つまり、抽象的なスタイルを記述できるので、値を変更しつつ複数の場面で使う設定がある場合には、ミックスインを使うと便利です。

関数と似ていますが、関数は値だけを返します。ミックスインはスタイル自体を返すという点が特徴です。

継承は、引数を持たず使いまわしができるスタイルのことです。同じスタイルを何回も書かなくて済むため、効率的に実装することができるでしょう。

Sassのデメリットとは!?

Sassのデメリットは、以下の通りです。

  • 学習コストがかかる
  • 環境に依存する

それぞれ解説します。

  • 学習コストがかかる

Sass はCSSのメタ言語であるため、CSSと似た使用感となっています。そのため、プログラミング言語をはじめから学ぶよりは学習コストがかからないでしょう。
ただし、スタイルシートに触れたことがない人の場合、習得にある程度の時間を要すると考えられます。

  • 環境に依存する

2つ目は、環境に依存するという点です。SassはCSSに変換しなければならないため、環境によってRubyやコンパイラをインストールするなど、Sassのための開発環境を整える必要があります。

Sassとは

 

Sassの書き方「SASS」「SCSS」とは?

Sassには「SASS」「SCSS」という2種類の書き方があります。

SASS記法について

SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。

SASS記法で書かれたSassファイルの拡張子は「.sass」です。

SCSS記法について

SCSS記法の特徴は、書き方がCSSに似ていることです。CSSのようにネストを使用するため、CSSに触れたことのある人なら直感的に書くことができます。そのため、SCSSのほうが一般的に普及しています。

ファイルの拡張子は「.scss」になります。

 

いざ入門!Sassの使い方を解説

ここからは、Sassのインストール方法と使い方を解説します。

なお、以下この記事のチュートリアルの環境は、MacOSバージョン10.15.5を使用しています。

SassとRuby、コンパイラのインストール

まずはSassとRuby、コンパイラをインストールします。

1.まずは、ターミナルを立ち上げてRubyがインストールされているか確認します。ターミナル起動後、以下のコマンドを入力してください。

2.下記のように表示されていれば、Rubyはインストール済みです。基本的に、Macには標準でRubyがインストールされています。(一方、Windowsの場合はRubyをインストールする必要があります。また、コンパイラによってRubyは不要です。)

3.次に、以下のコマンドを入力してSassをインストールします。また、適切なパスワードを入力してください。

4.以下のように表示されれば、インストールの完了です。

インストール完了

5.初心者の中にはCUIを使うのが苦手な方も多いので、このチュートリアルではGUIコンパイラ「Prepros」をインストールします。まずは以下のURLにアクセスしてください。

https://prepros.io

6.Webサイトにアクセスしたら「Download Free Unlimited Trial」をクリックしてください。

ダウンロード

7.ご自身の環境に合わせ、「Prepros」をダウンロードしてください。

Preprosをダウンロード

8.このチュートリアルではPrepros-7.3.26.zipをダウンロードしました。ダウンロードしたZIPファイルを展開します。

9.ZIPファイルを展開すると、ダウンロードフォルダにPreprosアイコンが表示されます。

Preprosのアイコン

10.これでPreprosをインストールすることができました。

Preprosのインストール完了画面

Sassの使い方!Mixin、&、変数などを解説

次に、Sassの使い方を解説します。このチュートリアルでは、以下のようにプロジェクトを作成しました。

Sassプロジェクトの作成

以下、style.scssに記述していきます。

ネスト(入れ子)とは何か

下のように、divの中にh2とh3が入っています。

セレクタの親要素を取得

子要素を宣言の中に入れられるため、CSSのようにdiv h2{}というような書き方をしなくて済むのです。

&を使用して親要素を取得

以下のように「&」を使用することで、セレクタの親要素を取得することが可能です。

hoverなどで非常に便利な機能になります。

8

四則演算の使い方

四則演算は文字通り、数字を足したり割ったりすることです。

以下のように使うことができます。

四則演算の使い方

変数の使い方

変数は、グローバル変数とローカル変数を使用することができます。以下のコメントにもあるように、$duplicateがグローバル変数、$widthがローカル変数です。

先ほど四則演算について解説しましたが、このように変数を使うともっと便利に演算ができます。

変数の使い方

mixin(ミックスイン)の使い方

ミックスインの使い方は、以下の画像の通りです。ミックスインを作成して、@includeで読み込むのが一般的です。

ミックスインの使い方

Sassのコンパイル

次に、Sassのコンパイル方法を解説していきます。

1.style.scssをクリックしてください。

コンパイル方法は?

2.右下にあるProcess Fileをクリックします。

ファイルの作成

3.以上でコンパイル完了です。コンパイルに成功した場合、cssフォルダーの中にstyle.cssが自動で追加されます。

コンパイルの成功

 

この記事では、Sassの基礎、インストール方法と使い方について解説しました。Sassを使えば、格段に開発効率がアップするため、Sassは今後も多くのWeb開発現場で採用されるでしょう。

 

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

最新のAdobe XDを最短でマスター

【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。