2020/10/05 (更新日: 2020/10/25)

【Sassの始め方】 SASS記法とSCSS記法の書き方の違い＆環境構築を解説

CSS PROGRAMMING

本記事では、Web制作の現場でよく使われるSassについて、知らない初心者向けにどのように始めればよいかを解説します。

この記事を読むことによって、Sassの環境を作って、とりあえず動かす環境を構築する簡単な方法がわかるようになります。僕自身が初心者の頃に使った方法で誰でも使えるようになる方法だと思います。

SassはCSSを拡張したメタ言語です。つまりSassはCSSに対して機能を拡張した言語ということで、CSSを効率的に書けるように大幅に機能アップさせています。

本記事の内容

• Sass（サス）には「SASS記法」と「SCSS記法」の２つがある
• Sassのコンパイル方法（環境設定）
• @mixinの書き方の違い SASS記法とSCSS記法の比較
• その他のCSSメタ言語

Sass（サス）には「SASS記法」と「SCSS記法」の２つがある

Sassには書き方が２つあります。
最初に作られたのがSASS記法で非常に簡素化された書き方でCSSとは互換性がなく書式が異なっていたため、広く普及はしませんでした（デザイナーなどプログラムに慣れていない人にはハードルが高かったそうです）。その後にCSSとの互換性を高めたSCSS記法が作られ、これが大きく普及したという経緯があるようです。

ググって調べた時に出てくる記事の大半はSCSS記法であり、初心者はSCSS記法で書くことをおすすめします。

▼補足

初心者から学んでいく場合は、SCSS記法で書けるようにすれば問題ありません。SCSSで書ければ、SASS記法でも書くことは簡単で慣れの問題なので、必要になった時に覚えればよいレベルの違いです。以下の違いを見ていただければわかると思います。

Sassの書き方

SCSS記法とSASS記法の簡単な書き方の解説です。
今回、書き方については簡単な解説のみなので、詳しく知りたい場合は以下の記事を参考にして下さい。
» 【初心者向け】 Sassの基本まとめ！ 基礎を徹底解説

SCSS記法での書き方

• 基本的にはCSSと同じ書き方
• 入れ子でネストしてCSSを書くことが可能
• @mixin,@includeや@extend、変数や関数などいろいろな拡張機能を使うことが可能

SASS記法での書き方 (主なSCSS記法との書き方の違い)

• セレクタの後の波カッコ（{}）は書かず、インデントで代用する
• プロパティの後のコロン（:）の後にスペースを１つ入れる
• 値の後のセミコロン（;）は書かない

SASS記法とSCSS記法の違い

以下でさらに具体的な例を見ながら、書き方の記述を見ていきます。基本的にはSCSS記法だけ見ていただければ問題ありません。

▼ベースとなるCSS

ul {
  margin: 0;
  list-style-type: none;
}
ul li {
  margin-bottom: 1rem;
}

上記のCSSをSassで書くと以下のように書くことができます。
※SCSS記法とSASS記法のそれぞれで解説します

▼SCSS記法で書いた場合

ul {
  margin: 0;
  list-style-type: none;

  li {
    margin-bottom: 1rem;
  }
}

見ていただくと分かる通り、SCSSはCSSとほぼ同じで、例だとulの中にネストしてliを書くことができています。書くコードの量が多くなると視認性が高くなることもわかると思います。SCSS記法は、CSSがわかれば直感的に書くことが可能です。これ以外にも主要な書き方がいくつかありますが、基本はこのようになります。

▼SASS記法で書いた場合

ul
  margin: 0
  list-style-type: none

  li
    margin-bottom: 1rem

SASS記法はSCSS記法よりもさらにコード量が少なくなっているのがわかると思います。慣れてくるとSASSの方が速く書けるので便利だと感じるようになり、ReactやVueなどではHTMLを簡単に書けるPUGと組み合わせて使うことが多いと思います。

Sassを使う理由

CSSを覚え始めてコードを書いている頃は、Sassを使う必要性を感じられないかもしれません。CSSで何の不自由も無いし、CSSのみで十分と感じるからです。僕自身も初学者の頃はそうでした。
実際にSassを使ってみると、ネストしたCSSが簡単に書けて記述量が減り、コードも見やすくなるのでメンテナンス性が大幅に向上します。変数を使えるので色コードを統一して簡単に書けたりもするので、一度使うとCSSには戻れなくなるくらい便利になります。

初学者には一度試しに、Sassを使ってみることをオススメします。CSSが書けるのであれば、１日あれば基本機能は簡単に学習することが可能です。
Sassは大量の機能があって覚えきれないので、代表的な書き方や関数のみを最初に学習し、他のコーダーが書いたSassでわからない書き方が出てきたら都度検索して調べれば十分かと思います。
逆にSassはすべてを使いこなせるようにするのは機能が多すぎて難しいので、最初は最小限の機能が使えれば何も問題ありません。

Sassのコンパイル方法（環境設定）

Sassはそのままではブラウザが認識できないので、CSSにコンパイルして変換する必要があります。xxx.scssのファイルからxxx.cssファイルを作り出すイメージです。

初心者は環境設定が難しいと思うので、簡単にSassをコンパイルできる環境の作り方をお伝えします。
開発現場では、webpackにパッケージをインストールして設定することが多く、他にはGulpを使う方法もあります。ただしこのようなモジュールバンドラーやタスクランナーと呼ばれるツールは初学者には難しいため、最初は簡単にSassのコンパイルができるアプリケーションを使うことをオススメします。

まずは、Sassを使うにはRubyのインストールが必要なので、Rubyの公式サイトにいき「ダウンロード」から最新の安定版をインストールしましょう。

続いて、以下で紹介する「Visual Studio Code」というエディタと拡張機能を使うか、Preprosというアプリケーションを使うとよいと思います。

Visual Studio Code (VSCode)を使う

初学者にはこれらは難しいので、VSCodeを使っていれば、「Live Sass Compiler」という拡張を入れるだけで、簡単にSassのコンパイルが可能となります。

1. VSCodeをインストールする
2. 左下の歯車アイコンをクリック→「拡張機能」をクリック→検索ボックスに「Live Sass Compiler」を入力して検索
3. 「Live Sass Compiler」の項目にある「インストール」をクリックしてインストール。これでインストールは完了です。
4. Sass(xxx.scssなど)ファイルがある状態で、VSCodeエディタの下部に表示されている「Watch Sass」をクリック
5. これでSassファイルが更新される度に自動的にSassファイルがあるディレクトリに同名のCSSファイル(xxx.css)が出力されるようになります。

Preprosを使う

Preprosというツールがあり、無料で使い続けることができます。WindowsでもMacでも使うことができます。
使っている時に時々表示される購入のポップアップで購入しなければ無料で使い続けることができます。ライセンスは１ライセンス29ドルなので、しばらく使ってみてよければ購入した方がポップアップが気にならなくなりますしよいと思います。

Preprosの公式にアクセスして「Downloa Free Unlimited Trial」もしくはヘッダーメニューの「Download」をクリックしてWindowsかMacなどを選んでインストーラーをダウンロードします。ソフトをインストールして立ち上げます。

使い方は簡単で、プロジェクトのフォルダごと、Preprosの上にドラッグ＆ドロップすればいいだけです。自動でSassファイルを認識してコンパイルしてくれます。詳細な使い方は以下でも紹介しています。
» 初心者向け Preprosの使い方 【無料でSassを使えるようにする方法】

最初のころはこのまま使えば簡単で良いと思います。CSSやJavaScriptのminifyやコンパイルの細かい設定もでき、かなり高機能なのに無料でも使えるのがすごいです。慣れてきたらCSSの出力先を変える等、いろいろ設定してみるのもありです。
確かPUGなどのビルドもできたと思いますし、僕はPreprosでは使ったことがないですがBabel(最新のJavaScriptを古いブラウザでも動くように対応できるパッケージ)も使えるようなので、いろいろなことが対応可能です。

@mixin(ミックスイン)の書き方の違い SASS記法とSCSS記法の比較

SCSS記法しか知らない人が混乱しやすい@mixinの違いについても触れておきます。SASS記法だとSCSS記法と比較して、@mixinの書き方も違います。
SASS記法ではSCSS記法の「@mixin」を「=」で、「@include」を「+」で書くなど他にも書き方の違いがあります。

▼SCSS記法で書いた場合

@mixin fontStyle ($size, $color) {
  font-size: $size;
  color: $color;
}

dl {
  margin: 10px;
  dt {
    @include fontStyle(20px, #f00);
  }
  dd {
    @include fontStyle(16px, #444);
  }
}

▼SASS記法で書いた場合

=fontStyle ($size, $color)
  font-size: $size
  color: $color

dl
  margin: 10px
  dt
    +fontStyle(20px, #f00)
  dd
    +fontStyle(16px, #444)

上記の例では「fontStyle」という作成したmixinを呼び出す方法ですが、SCSS記法で「@mixin」「@include」としているところを、SASS記法だと「=」と「+」で書きます。SassでググってもSCSS記法の記事が大量に出てきてSASS記法の記事は見つかりにくいため、知らないとググってもなかなか分かりにくい部分かもしれません。

▼コンパイルされた後のCSS

dl {
  margin: 10px;
}
dl dt {
  font-size: 20px;
  color:  #f00;
}
dl dd {
  font-size: 16px;
  color: #444;
}

その他のCSSメタ言語

Sass以外にも、その他にLESSやStylusといったメタ言語があります。

LESSはBootstrapで採用されていたため有名でSassと似ています。

StylusはSassやLESSよりも後発でSASS記法ににていて記述を簡素化して書くことができ、CSSの書式も使えるのが特徴です。Node.jsのモジュールの１つとして提供された経緯があります。

もし開発現場で使うことがあれば、都度学習すれば対応できるはずです。Sassを使うことがほとんどであり、Sassの基本を押さえていれば他のメタ言語も似たようなものなので問題ないと思います。

まとめ：Sassは難しくないのでとりあえず試してみるのがおすすめ

Sassは書いてみると意外と簡単で、まずは慣れることから始めるとよいです。
僕も最初の頃は、Preprosを使ってWordPressの開発案件をこなしていたりしました。

ご参考になれば幸いです。

Sass SCSS プログラミング

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

• facebook
• Tweet
• hatebu
• Share
• Read Later