【基礎から解説！】SassでCSSコーディングを効率よく行おう

Sassとは

S・A・S・S

Sass（サス、またはサース）とは「Syntactically Awesome Stylesheets」の略語であり、それぞれを分解すると以下のようになります。

Syntactically・・・構文的に
Awesome・・・とても素晴らしい
Style Sheet・・・スタイルシート

Awesomeは最近の若者言葉で、最もマッチするニュアンスで言うと「ヤバイ、イケてる」にあたるでしょう。このワードからだけでも、Sassに革新性や優秀度があることがイメージできます。

では、実際にSassはどのように優秀なのでしょうか。ここからは専門的な視点で捉えていきましょう。

Sassは便利なスタイルシート

Sassとは、簡単に言うと「Webサイトのスタイルを指定するための言語CSSに対するメタ言語」です。それぞれの専門用語について噛み砕きながら理解を深めましょう。

まず、Sass（Syntactically Awesome Style Sheets）とCSS（Cascading Style Sheets）、両者の最後のダブルSにあたるStyle Sheets（スタイルシート）についてです。スタイルシートとは、Webサイトで表示される文字のフォントや大きさ、色などといった文書データの修飾（スタイル）に関する情報を定義することができる技術全般のことを言います。

そして、SassやCSSはそんなスタイルシートにおいて、スタイルをプログラミングするための言語（スクリプト言語）のことを指します。

また、メタ言語とは、ある言語について定義をしたり、情報を記述したりするための人工のプログラミング言語のこと。SassはCSSのメタ言語ですので、CSSの機能を拡張した言語がSassということになります。つまり、CSSでのコーディングを簡略することを可能にしたのがSassです。

このSassというメタ言語の登場は、コーディングの作業効率を飛躍的に高めました。ある調査によれば、HTMLを使用するコーダーの約70％がSassを利用しているという結果が出ているそうです。まさに、Sassは名前通りの「Awesome（イケてる）」なスタイルシートと言えるでしょう。

SassとCSSの違い

先述の通り、CSSを効率的に定義できるようにしたのがSassですが、実用において、SassとCSSは具体的にはどのように違うのでしょうか。

Sassはできることが多い

Sassを取り入れることで、CSSだけではできなかった下記のような処理ができるようになります。

• 変数
• 関数
• 算術演算（四則演算）
• ミックスイン（テンプレート化）
• エクステンド（スタイルの継承）
• ネスト記述（入れ子記述）
• インポート（外部ファイル読み込み）

Sassの導入によって、もともとCSSにない動的な処理機能を追加で装備できるようになります。このような特性により、Sassには、CSSが関数や変数、算出演算を行うための「プリプロセッサ（※）」という呼び名が付いているほどです。

Sassが装備する優秀な機能については、後ほど詳しく解説します。

（※）プリプロセッサ（Prepocessor）・・・あるプログラムが行うメインの処理に対し、データの入力や整形などといった前段階にあたる処理（Preprocess）で準備を行うプログラムのこと。

SASS記法とCSS

Sassには2種類の記法があります。一つ目は、Sassが当初から採用している記法「SASS記法」です。SASS記法ではCSSとは全く異なる文法や記法でそれを定義しますが、そのオリジナル記述の特徴はシンプルで無駄が省かれているところ。それにより、コーディングも簡潔かつコンパクトに仕上げることが可能になりました。

SCSS記法とCSS

前述のSASS記法のメリットは、そのオリジナル性の上に成り立っていると言えます。しかし、文法や記法がCSSと異なるということは、CSSとの互換性も低いということになります。そのズレによる扱いにくさを埋めるため、Sassのバージョン3.0から採用された新しい記法が「SCSS記法」です。

CSSにとってのSASS記法が「新しい言語」だとすれば、SCSS記法は「新しい装備が追加された同じ言語」でしょう。SCSS記法の基本的な書き方はCSSとほぼ同じです。つまり、CSSで正しいとされる記述は、同じくSCSSでも正しい記述となります。そのため、これまでにCSSの利用経験があれば、SCSS記法についてはその習得時間をかなり短縮できるでしょう。実際のところ、これまでCSSを扱ってきたコーダーの中では、SASS記法よりもSCSS記法の方が「コーディングがしやすい」という声が多いようです。

Sassを使うメリット・デメリット

Sassを使うメリット

Sassの優れた点についてはここまででも述べてきましたが、改めてまとめると、以下のようになります。

• CSSを効率良く定義できるようになる
• コーディングが簡略化される
• コーディング効率が上がる
• CSSにない関数や変数、算出演算などが可能になる
• ソースコードの編集が容易になる（保守性の向上）
• メンテナンス性の向上（記述量が減るため）

Sassを使うデメリット1「学習コスト」

多くのメリットを持つSassですが、デメリットも存在します。

デメリットの一つ目は「習得するための時間が必要」です。Sassはここまでにご紹介した基本的な機能の他にも、多数の機能を幅広く備えており、全てを使いこなすようになるには、やはりそれなりの学習時間が必要になります。

しかし、先ほど説明した通り、SCSS記法を使えばその使用感はCSSとほとんど変わらないため、CSSの扱いに慣れていれば学習コストはかなり削減できるでしょう。

また、Sassはその基本機能だけでも、CSSのみの使用時よりもはるかに高いパフォーマンスが期待されます。SCSSフォルダ内であれば、CSSを記述したり混在させることも可能ですので、まずはSassを試しに導入してみて、使いやすい基本機能から利用しながら少しずつ慣れていく、というのも一つの運用アイデアです。

Sassを使うデメリット2「インストール」

Sassはインストールするために少し手間が必要になります。簡単に説明すると、SassはRuby（※）製のCSSメタ言語であるため、導入するためにはまず、Rubyを先にインンストールする必要があります。このRubyインストールから、Sassのインストール完了確認までのプロセスに、多少の手間と時間がかかるのです。

しかし、使用機器がMacであれば、MacはもともとRubyを搭載しているので、Rubyをインストールする時間は省けます。また、Windowsの場合でも、さまざまなWebサイトや書籍においてSassの導入方法についての詳しい解説がされているので、そこまで大きな負担となることはないでしょう。Sassのインストール手順については、この記事でも後ほど紹介します。

※ Ruby（ルビー）・・・プログラミング言語の一つ。オブジェクト指向スクリプト言語と定義され、主に動的なWebサイトの作成に役立つ

Sassを使うデメリット3「ファイルの管理」

基本的に、SassでCSSファイルを作成する際は、Sassの .scss というファイルで編集をした後、それを .css というCSSファイルに変換（コンパイル）する、という流れになります。つまり、メインである .css ファイルに加え、編集用の .scss ファイルというものが存在することになります。ファイルの数が増えることにより、必然的に管理する手間も増えます。

ちなみに、エンジニアによってはSassの .scss ファイルだけを管理する裏技的テクニックを利用している人がいるそうです。

Sassの導入方法

Ruby導入

SassはRuby製のCSSメタ言語であるため、RubyなしではSassは動きません。 Sassをインストースするためには、まず先にRubyをインストールする必要があります。ちなみに、MacにはRubyがもともと搭載されているので、インストールは不要です。

以下のような手順で進めます。

• Rubyの公式サイト（https://rubyinstaller.org）にアクセスし、最新版をインストール
• 使用PCが64bitの場合は（x64）と表記されているものをインストール
• 「インストール先とオプションの指定」というポップアップが表示される
• 「Rubyの実行ファイルへ環境変数PATHを指定する」にチェックマークを入れる
• スタートメニューでコマンドプロンプトを開き、「ruby -v」と入力する
• バージョン情報が返ってくればインストールは完了済み

Sass導入

SassのインストールにはRubyを使用します。

• スタートメニューからRubyのコマンドプロンプトを起動させる
• コマンドを「gem install sass」と入力し、インストール開始
• バージョンを確認してインストールされているかを確認

Sassの機能・基本的な書き方

CSSの基本的な記述方法

Sassの記述方法を習得する前に、CSSを書けることが前提です。まずはCSSの基本的な記述方法について解説します。以下はとてもシンプルなCSSのソースコードです。

.article .title {
color: blue;
}

これは、「.article 内にある、 .title の、color（文字色）を、blue（青）にする」というものです。ここでは .title は .article に対して依存関係にあることが示されています。

SCSSの基本的な記述方法

SCSS記法では波括弧「 { } 」を用いて入れ子構造を作ることで、CSSでの依存関係を表します。その他の表記はCSSと同様です。

.article {
.title {
color: blue;
}
}

SASSの基本的な記述方法

SASS記法では依存関係を表したい場合は波括弧「 { } 」ではなく、半角スペース2文字のインデント（字下げ）を用います。また、color: blue; の後ろにあるセミコロン「 ; 」は省きます。ただし、color: の後には半角スペースの入力が必要です。

.article
.title
color: blue

ネスト（入れ子）構造

CSSがHTMLに記述されているある範囲においてデザイン指定をする際は、その適用範囲をセレクトするためにCSSセレクタを用いますが、SassはこのセレクタをHTMLの構造に合わせて、入れ子で記述することを可能にします。ちなみに、これをネスト機能と言います。

ネスト機能を使うことで、親セレクタを何度も記述する必要がなくなるので、コーディングの手間が軽減されるだけでなく、コードの簡略化によりメンテナンスも楽になります。

ネストの記述では波括弧「 { } 」を用います。具体的な書き方については、先ほどの「基本的な記述方法」の例にて、依存関係の示し方として説明しています。

変数

変数とは、あるデータを記憶するために、一時的に名前をつけられ管理された言語のことです。

変数の強みは、繰り返し使えるということ。例えば、後で使う可能性が高い数値やカラーコードに名前をつけて変数としおくと、実際に必要となった際にそのデータを始めから入力する手間なく、指定した変数名を入力するだけでそのスタイルシートを再び使うことができます。つまり、

Webサイトのメインカラーやサブカラーを総替えする必要が生じた際、修正箇所は一箇所のみで済むということです。これはとても便利です。

変数名の頭には「$」を付け、「$変数名: 値;」で記述します。

SCSS記法では

$main_color: #cf2d1a;
p {
color: $main_color;
}

CSSファイルに変換すると

p {
color: #cf2d1a;
}

mixin（ミックスイン）

mixinは簡単に言うと、関数のようなものです。関数を使う際に必要な引数には、変数が指定されるので、mixinの性質は先ほどの変数と似ています。mixinは受け取った値（変数）を対価として、必要な処理を実行に移します。つまりmixinとは、同じような処理を呼び出す際、引数によってそれを変更できるという機能です。これはうまく活用できれば、コードの記述量の大幅削減につながります。

SCSS記法での書き方は、まず、@mixinの後ろに名前をつけることで定義をし、@includeの後ろにmixin名を記述することで呼び出しを行います。そして引数を渡せば、@mixinで定義したスタイルと引数で指定したデータがテンプレート化されるという仕組みです。

SASS記法の場合は、この@mixinを「＝」、@includeを「＋」というシンプルな記号で表します。

pxとremの両方のフォントサイズを表示するmixinを作りたい時、CSSファイルは以下のような記述になります。

.article .title {
font-size: 15px;
font-size: 1.5rem;
}

この場合、SCSS記法では以下のようになります。

@mixin rem($size) {
font-size: $size + px;
font-size: $size / 10 * 1rem;
}.article {
.title {
@include rem(15);
}
}

SASS記法では「＝」と「＋」を用います。

算出演算

Sassの算出演算機能があれば、CSSでのコーディング時に使っていた電卓は出番がなくなります。四則演算である足し算、引き算、割り算、掛け算はそれぞれ（+）、（-）、（/）、（*）で記述します。これらの記号を書くだけで、CSSにコンパイルした際に自動的に計算が行われ、解の値が表示されます。

SCSS記法

$takasa: 600px;#main {
width: 200px + 100;
height: $takasa / 3;
}

CSSに変換

#main {
width: 300px;
height: 200px;
}

インポート

Sassファイル内のスタイル変更や修正が必要な際、もともとのファイルの記述量が多いと、後に面倒な作業を強いられることになります。それを軽減するため、ファイルは事前に分割して作業を行うのが一般的です。

インポートとは、そのように複数できたSassファイルを結合し、1つのCSSファイルとして圧縮する機能です。

@importという記述で、分割されたファイルをまとめて読み込むことができます。

記述例

@import “top.scss”;
@import “button.scss”;

エクステンド

エクステンドはスタイルの継承、またその上でのスタイルの追加・上書きを行うことができる機能です。
記述は@extendを使用します。

.btn {
padding: 10px 20px;
border: 2px lightblue;
border-radius: 3px;
background-color: red;
}.btn-submit {
@extend .btn; //.btnのスタイルを継承
background-color: lightgray; //スタイルの上書き
font-size: 1.5em; //スタイルの追加
}

まとめ

Webマーケティングの発展により、Webサイト制作においてはさらに高度なデザイン技術が求められるようになりました。そのような状況において、従来通りのCSSの利用だけでは、肥大化を加速しているCSSソースコードに太刀打ちできなくなるのも時間の問題です。より高いレベルで求められるコーディングに対して、エンジニアはこれから、正確性と生産性をより向上させるための術を身につける必要があるでしょう。

Sassは、その基本機能だけでも、作業効率を格段と上げてくれます。もしプログラミングに苦手意識がある場合でも、まずはSassの優れた機能について理解を深め、できる範囲で少しづつ、その機能を試してみることをお勧めします。