【入門編】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」「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」をダウンロードしてください。

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

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

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

Sassの使い方！Mixin、＆、変数などを解説

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

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

ネスト（入れ子）とは何か

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

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

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

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

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

四則演算の使い方

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

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

変数の使い方

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

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

mixin（ミックスイン）の使い方

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

Sassのコンパイル

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

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

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

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

　

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