Sassとは？概要やCSSとの違い、利用するための手順などを解説

Sass（サス / サース）は、Webデザインや開発において便利なCSSプリプロセッサ（CSS preprocessor）の一つです。CSSプリプロセッサは、普通のCSSよりも柔軟で効率的なスタイルシートを記述するためのツールであり、Sassはその中でも特に人気があります。

本記事では、Sassの基本的な概要から、従来のCSSとの違い、Sassを利用するための手順について解説します。

Sassとは？

Sassとは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。

Sassは、CSSの欠点を補完するために生まれ、CSSよりも簡潔で効率的なコードを記述できます。SassはCSSのメタ言語であり、Sassは「CSSに対し機能を拡張した言語」ということになります。

メタ言語
言語の文法など言語そのものを記述するのではなく、ある言語によるコード（プログラムなど）を効率的に生成するために用いられる別の言語のこと
引用：IT用語辞典 e-Words

SassとCSSの違いは？

SassとCSSは両方ともスタイルシートを作成するための言語ですが、いくつかの重要な違いがあります。

変数の使用

Sassでは変数を使うことができます。変数は値に名前をつけて保持する仕組みであり、同じ値を複数の場所で使い回すことができます。これにより、色やフォントサイズなどの値を変更する際に、変数の値を一つ変えるだけで全ての箇所に影響を与えることができます。

一方、CSSでは変数をサポートしていないため、同じ値を繰り返し記述する必要があります。

// Sass
$primary-color: #007bff;
$link-color: $primary-color;

a {
　color: $link-color;
}

// Compiled CSS
a {
　color: #007bff;
}

ネスト構造

Sassでは、親要素と子要素の関係をネスト構造で表現することができます。これにより、より論理的なコードを書くことができます。

ネスト構造
プログラムの制御構造で、if（ 条件A ）{ … if（ 条件B ）{ … } … } といったように、条件分岐やループの内部に、別の条件分岐やループなどが含まれている状態。
引用：IT用語辞典 e-Words

一方、CSSではネスト構造をサポートしていないため、セレクターの階層が深くなる場合にはCSSよりも冗長になる可能性があります。

// Sass
nav {
　ul {
　　margin: 0;
　　padding: 0;
　　list-style: none;

　　li {
　　display: inline-block;
　　margin-right: 10px;
　　}
　}
}

// Compiled CSS
nav ul {
　margin: 0;
　padding: 0;
　list-style: none;
}

nav ul li {
　display: inline-block;
　margin-right: 10px;
}

Mixins（ミックスイン）

Sassでは、再利用可能なコードの断片を定義するためのMixinsという機能があります。Mixinsを使うことで、同じスタイルを複数のセレクターで共有することができます。CSSにはこのような機能がないため、同じスタイルを繰り返し記述する必要があります。

// Sass
@mixin button-style {
　display: inline-block;
　padding: 10px 20px;
　border: none;
　border-radius: 4px;
　color: #fff;
}

.btn-primary {
　@include button-style;
　background-color: #007bff;
}

.btn-secondary {
　@include button-style;
　background-color: #6c757d;
}

// Compiled CSS
.btn-primary {
　display: inline-block;
　padding: 10px 20px;
　border: none;
　border-radius: 4px;
　color: #fff;
　background-color: #007bff;
}

.btn-secondary {
　display: inline-block;
　padding: 10px 20px;
　border: none;
　border-radius: 4px;
　color: #fff;
　background-color: #6c757d;
}

これらの違いにより、Sassを使うことでより効率的で保守性の高いスタイルシートを作成することができます。ただし、ブラウザが直接Sassを理解することはできないため、SassファイルをCSSにコンパイルする必要があります。このプロセスを理解しておくことも重要です。

プログラミングスクールなら
忍者CODE

Sassには「SASS」と「SCSS」の2つがある

Sassには、「SASS」と「SCSS」という2つの異なる構文が存在します。初めてSassを学ぶ方にとっては、これらの違いを理解することが重要です。

SASS

SASSは、シンプルな構文を持つSassのオリジナルバージョンです。この構文では、セミコロンや中括弧を使用せず、改行とインデントによって階層を表現します。SASSは、スペースをうまく活用してコードをすっきりと見せることができますが、構文が独特であるため、CSSとは異なる見た目になります。

// SASS
$primary-color: #007bff

body
　font-family: Arial, sans-serif
　color: $primary-color

.container
　width: 100%

SCSS

SCSSは、CSSに近い構文を持つSassの新しいバージョンです。この構文では、中括弧やセミコロンを使用し、CSSに似た形で記述します。SCSSは、従来のCSSユーザーにとってはなじみやすく、移行がスムーズです。

// SCSS
$primary-color: #007bff;

body {
　font-family: Arial, sans-serif;
　color: $primary-color;
}

.container {
　width: 100%;
}

どちらを選ぶべきか？

SASSとSCSSのどちらを選ぶかは、個人の好みやプロジェクトの要件によります。SASSは、シンプルでスッキリした構文を提供しますが、CSSとは異なる見た目を持っています。

一方、SCSSはCSSに近い構文を持っており、従来のCSSユーザーにはなじみやすいです。プロジェクトのスタイルガイドや既存のコードとの親和性を考慮して、適切な構文を選択しましょう。

コンパイルについて

Sassは、ブラウザが直接理解できるCSSにコンパイルする必要があります。Sassファイル（.sassまたは.scss拡張子）をCSSファイルに変換するには、コンパイルツールを使用します。多くの開発環境やビルドツールがSassのコンパイルをサポートしているため、簡単に導入できます。

以上のように、「SASS」と「SCSS」の違いを理解し、自分のプロジェクトに最適な構文を選択することで、より快適なSass開発を行うことができます。

Sassを利用するための手順

Sassを利用するためには、いくつかの準備が必要です。初心者の方も安心して進められるように、以下のステップを順番に追って説明します。

ステップ1: インストール

まず最初に、Sassを使うために必要なツールをインストールします。SassはRubyで動作するため、Rubyのインストールが必要です。既にRubyがインストールされている場合は、次のコマンドでSassをインストールできます。

gem install sass

ステップ2: プロジェクトのセットアップ

Sassを使用するプロジェクトをセットアップしましょう。プロジェクトのルートに「styles」というフォルダを作成し、その中にSassファイル（.sassまたは.scss拡張子）を作成します。通常、Sassファイルの拡張子は.scssを使いますが、もしSASS構文を選んだ場合は.sassを使用します。

ステップ3: Sassのコンパイル

Sassファイルをブラウザが理解できるCSSファイルに変換するために、コンパイル作業が必要です。これにより、Sassで書かれたスタイルが反映されます。

コンパイルにはいくつかの方法がありますが、簡単な方法としてはコマンドラインでのコンパイルが挙げられます。コマンドプロンプト（Windows）またはターミナル（macOSやLinux）を開き、以下のコマンドを使ってコンパイルできます。

sass input.scss output.css

ここで、input.scssは変換したいSassファイルの名前、output.cssは変換後のCSSファイルの名前を指定します。もし、複数のSassファイルをまとめて一つのCSSファイルにコンパイルしたい場合は、カンマでファイルを区切って指定します。

ステップ4: 自動監視（オプション）

コンパイルしたCSSファイルを常に最新の状態に保つために、自動監視（ウォッチ）機能を使うことができます。これにより、Sassファイルに変更があるたびに自動的にコンパイルが実行されます。

以下のコマンドを使用して、自動監視を開始します。

sass --watch input.scss output.css

ステップ5: HTMLファイルでの利用

最後に、Sassで書かれたスタイルをHTMLファイルで使用するために、コンパイルされたCSSファイルをHTMLファイルにリンクします。以下のように、headセクション内にlinkタグを追加します。

<!DOCTYPE html>
<html>
<head>
　<link rel="stylesheet" href="output.css">
</head>
<body>
　<!-- ここにコンテンツを記述 -->
</body>
</html>

これで、Sassを利用するための準備が整いました。Sassを使って効率的で柔軟性のあるスタイルシートを作成し、Webデザインや開発を楽しんでください！

挫折することなくエンジニアを目指すなら

独学？スクール？

これからHTMLやCSSなどといったプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際に学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

まとめ

Sassは、CSSプリプロセッサとして、変数、ネスト構造、Mixinsなどの機能を提供する強力なツールです。従来のCSSと比較して、Sassはスタイルシートの記述を効率化し、保守性を高めることができます。変数を使用することで、スタイルの一貫性を保ちつつ、簡単に変更を反映させることができます。

Sassは「SASS」と「SCSS」の2つの構文がありますが、どちらを選ぶかは個人の好みやプロジェクトの要件によります。Sassを使って、効率的で柔軟性のあるスタイルシートを作成し、Webデザインや開発をより楽しく効率的に進めましょう。