sass・scssとは？導入方法や使い方を解説する【Win/Mac対応】

  • PR
  • ローカル開発環境
sass・scssとは？導入方法や使い方を解説する【Win/Mac対応】

今回は、効率的なCSSのコーディングに役立つ『sass』と『scss』について解説してゆきます。


この記事の内容はWindows・Macの両方に対応しています。



▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

目次

sass・scssの特徴やインストール方法について解説します

SASS（SCSS）の概要やインストール方法を解説します

普段からCSSを使用する人であれば、『sass』もしくは『scss』といった言葉を聞いたことがある方も多いのではないでしょうか。



また、WEBデザイナーやエンジニアとして業務や学習でCSSは使用していても、sassやscssにはまだ触れたことがないという人も多いと思います。



そこで今回は、次の様な方に向けてsassとscssの特徴や、PCで利用するためのインストール手順について詳しく解説してゆきます。



▼この記事が向いている人

  • これからsass・scssを使ってみたい
  • sass・scssのどちらを使うかで悩んでいる
  • PCで利用するためのインストール方法が知りたい
初心者の方にも分かりやすく、図解付きで詳しく解説してゆきます！

sass・scssとは？

Sass

sassやscssとは、具体的には『Sass』というCSSメタ言語のもとに利用する事ができる構文のことを言い、次のような目的のために設計・開発されました。



▼Sass（sass・scss）の開発の目的

  • CSSコーディングの作業効率化
  • CSSのメンテナンス・保守性の向上



CSSはシンプルで分かりやすく書ける反面、WEBサイトのページ数や規模に比例してCSSのコードも肥大化しやすくなり、メンテナンス性や作業効率を下げるという問題を引き起こします。



この様な問題を解決するために開発された『Sass』は実際に広く受け入れられ、現在ではWEBサイト制作などの目的をはじめ、CSSを使用した多くのコーディング作業で使用されています。


▼補足その①
『Sass（サース）』とは、Syntactically Awesome Style Sheetsの頭文字をとって出来た言葉で、日本語に訳すと”構造的にすばらしいスタイルシート”といった意味合いになります。
▼補足その②
CSSメタ言語とは、要約して『CSSを書くための言語』といった風に解釈できます。
Sassはコーディングの作業効率・メンテナンス・保守性の向上を目的に開発されたCSSメタ言語。CSSを使用した多くのコーディング作業に使われている。

Sassの全体像について

sass・scssを利用するためにもその前提となる『Sass』との関係を理解してゆきましょう。さきにも登場した言葉の関係を図に表すと、次のようになります。

Sass・SASS・SCSSの関係
図：Sass・sass・scssの関係

上記の通り、今回紹介するsass・scssは『Sass』というツールが前提となって利用できるものという事が分かります。この上でSassが提供している機能には次の2つがあります。



▼Sassが提供している2つの機能

  • sass・scssというCSSコーディングのための記法
  • sass・scssの内容をCSSに変換（コンパイル）する
このためにも、sass・scssを利用するにはPC上に『Sass』をインストールする必要があります。
PC上にSassをインストールする手順については後ほど解説を行います！

Sassの普及率について

フロントエンドツールとしての『Sass』の普及率についても触れてゆきます。



2018年に実施されたフロントエンド開発者5000人のアンケート調査における『CSSプロセッサには何を使っていますか？』という質問おいては、フロントエンド開発者のおよそ全体の65%以上が『Sass』を利用しているとの回答でした。

引用：ashleynolan

海外のアンケート結果とはなりますが、『Sass』は多くのフロントエンジニアに使用されていることが伺えます。

また、国内のオンラインスクールであるTechAcademyにおいても『Sass』を前提としたカリキュラムが組まれてもいる状況です。

TechAcademy(Webデザインコース）

▼公式サイト

TechAcademy(Webデザインコース）



以上のことからも、Sassは現状で多くのフロントエンド開発者に使用されているとともに、今後の使用者も増える事が予想されます。

フロントエンジニアの65%以上がSassを利用しており、オンラインスクールでもSassを前提としたカリキュラムが組まれている。今後はより標準的なフロントエンドツールとなることも予想される。

sass・scssの記法の違い

sass・scssの記法の違い

sassとscssの記法の違いについても確認しておきましょう。今回は、次のCSSを例にsass・scssそれぞれの記法の違いを解説してゆきます。



.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}

sassの記法について

上記のCSS例をsassで書いた場合は次のようになります。



▼sassの記述例

$blue: #3bbfce
$margin: 16px
.border
    padding: $margin/2
    margin:  $margin/2
    border-color: $blue



このほかsass記法の特徴を挙げると次のようになります。



▼sassの記法

  • ファイルの拡張子には『.sass』を使用する
  • ネストの表現には『波括弧{}』のかわりにインデントを使用する
  • プロパティ名の『コロン:』の次には半角スペースが必要
  • プロパティの終わりの『セミコロン;』は不要

sassは『波括弧{}』は使わずにインデント使ってネスト（入れ子）を表現する。このほか『セミコロン;』を省略して書けるため、タイプ数を少なく書ける特徴があります。

scssの記法について

上記のCSS例をscssで書いた場合は次のようになります。



▼scssの記述例

$blue: #3bbfce;
$margin: 16px;
.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}



このほかscss記法の特徴を挙げると次のようになります。



▼scssの特徴

  • ファイルの拡張子には『.scss』を使用する
  • 『波カッコ{}』や『セミコロン;』はCSSと同様に必要となる
  • scssファイル内にCSSをそのまま書くことも出来る
一方でのscssは、『波括弧{}』を使用してネスト（入れ子）を表現します。基本的な書き方はCSSとさほど変わらず、直感的にも書きやすくなっていることが特徴的です。

scss・sassはどちらを使用すべきか

これから学習するとしたらsassとscssのどちらを選ぶべきか、または、現場でのコーディングにおいてどちらを採用すべきかと思われるかたも多いと思います。



この点についてはscss・sassの使用率などが分かるデータがある訳ではありませんが、多くの書籍やWEBページではscssを基準とした内容で紹介されているため、この事から現状ではscssが主流となっていることが伺えます。

よって情報が得やすく学習しやすいといった観点から、これからSassを利用するのであればscssをメインに学習・利用していくのが推奨されます。

とはいえscss・sassは構文こそ違えど、その前提であるSassが出来る機能に違いはありません。どちらかで覚えてしまいさえすれば、使い分けはさほど難しくもないので、学習中においてはこの違いはあまり気にしなくても良いとも筆者は考えています。

これから学習を始めるならscssがおススメ。ちなみに筆者もscss記法でSassを利用しています。

Windowsにインストールする方法

Windows

WindowsでSassをインストールするには、次の手順で作業を行います。



▼Windowsにインストールする手順
  1. Rubyをインストールする
  2. Sassをインストールする

Rubyをインストールする

Sassの動作にはプログラミング言語の『Ruby』が前提となるため、まずはWindowsにRubyをインストールする必要があります。


次のサイトで取得できるインストーラーを実行して、Rubyをインストールしましょう。


▼Rubyのインストーラーはこちら
WindowsにRubyをインストールする①
WindowsにRubyをインストールする方法については次の記事も参考になります。
おススメ記事
WindowsにRubyをインストールする方法この記事では、WindowsでRubyの実行環境が必要になったときに役立つ、Rubyのインストール方法やバージョンの確認...

Sassをインストールする

WindowsにRubyを導入したら、つづけてSassのインストールを行います。



Sassをインストールするには、コマンドプロンプトで次のコマンド実行します。


▼Sassをインストールする
gem install sass
WindowsにSassをインストールする①
WindowsにSassをインストールする①

以下のようなメッセージが出ていたらSassのインストールは完了です。

Done installing documentation for ffi, rb-inotify, rb-fsevent, sass-listen, sass after 4 seconds
5 gems installed

また、WindowsにインストールしたSassのバージョンは次のコマンドで確認できます。



▼Sassのバージョン確認

sass -v
WindowsにSassをインストールする②
WindowsにSassをインストールする②
以上でWindowsにSassをインストールする方法の解説は終わりです。

Macにインストールする方法

Apple

Macに『Sass』をインストールするには、次の手順で作業を行います。



▼Macに『Sass』をインストールする方法

  1. Sassをインストールする
MacにはSassの利用に必要な『Ruby』が標準でインストールされているため、今回はSassのインストール方法のみ解説を行います。

Sassをインストールする

MacにSassをインストールするには、ターミナルを開いて次のコマンド実行します。



▼実行コマンド
sudo gem install sass -n /usr/local/bin/



Macの場合はインストールにroot権限が必要となるため、先頭にsudoを追加しています。コマンドの実行後にパスワードが聞かれるのでログインユーザーのパスワードを入力してインストール作業を続けましょう。

gemとはRubyのライブラリを扱うためのコマンドにあたり、上記のコマンドを実行するとRubyを通してSassのインストールが行われます。 また、オプション-nに指定したパス『/usr/local/bin』はログインユーザーだけが利用できるコマンドの置き場を指します。 

数秒後に次の様なメッセージが表示されればsassのインストールは完了です。

Done installing documentation for ffi, rb-inotify, rb-fsevent, sass-listen, sass after 4 seconds
5 gems installed

また、MacにインストールしたSassのバージョンは、次のコマンドで確認できます。



▼Sassのバージョン確認

sass -v
以上でMacにSassをインストールする方法の解説は終わりです。

Sassの基本的な使い方

Sassをインストールする事ができたら、実際にsass・scssをコンパイルをしてCSSに変換する作業を行ってみましょう。

今回はscssのコンパイル作業を例に解説をおこないます。

scss(sass)ファイルを用意する

先ずはscss記法でコードを記述したファイルを用意します。先ほどにも登場した次の内容をコピペして、ファイルに保存しましょう。



▼scssファイルの内容

$blue: #3bbfce;
$margin: 16px;
.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}



またこの際には、保存するファイルの拡張子を『.scss』にします。（sassの場合は拡張子を『.sass』にします）



実際にscssファイルを作成して配置すると次のようになります。

scssコンパイル①
scssファイルを作成した状態

CSSにコンパイルする

scssのファイルを用意ができたら、続けてコマンドプロンプト（コンソール）を開き、ファイルがある場所に移動して次のコマンドを実行します。



▼実行するコマンド

sass test.scss:test.css



また、このコマンドに渡す引数の内容は次のようになります。



sass 【scssファイル名】:【cssファイル名】



コマンドが通ると、実行場所には次のようなファイルが作成されます。

scssコンパイル②
コマンドの実行結果

コマンドの実行結果として出力される各ファイルの内容は次のようになります。



▼Sassのコンパイルで生成されるファイル

  • css：sass・scssが変換されて出力されたCSSファイル
  • css.map：CSSの変換元の情報が書かれたファイル
    ※Chromeの検証ツールでsass・scssの行数を知るなどのデバッグ作業で役立ちます
    ※コマンドに『--sourcemap=none』オプションを追加すると出力されなくなります
  • .sass-cache：sassのキャッシュファイル
    ※次回以降のコンパイルを高速化するために利用されます
    ※コマンドに『--no-cache』オプションを追加すると出力されなくなります



いくつかファイルが生成されるため初めて使う方は困惑されるかもしれませんが、このうちWEBページのデザインに影響するものはあくまで『css』ファイルのみとなります。

コンパイル結果として出力された『CSSファイル』を、Sassの導入以前と同じようにHTMLに読み込ませて使用してゆきましょう。

また、css.mapや.sass-cacheなどは、いずれもSassを使用したコーディング作業に必要なものになります。これらはオプションを指定すれば出力しない様にする事もできます。



以上でSassを使用したscssのコンパイル作業の解説は終わりです。

この記事のまとめ

今回は、効率的なCSSのコーディングに役立つsass・scssについて、くわしい解説を行いました。



▼sass・scssの利用の目的

  • CSSコーディングの作業効率化
  • CSSのメンテナンス・保守性の向上



またこの上では、実行環境を作成に必要となる『Sass』のインストール手順についても、詳しい解説を行いました。



▼Windowsにインストールする方法

  1. Rubyをインストールする
  2. Sassをインストールする



今回は以上となります。

最後までお読みいただきありがとうございました！

関連記事