作業効率・メンテナンス性を高めるSassの使い方。実際に書いて体験してみよう

Web制作の現場では、日々新しい技術を求められ、CSSでレイアウトを組んでいく中では、効率的かつメンテナンス性の高いコードを書いていくことが必要になってきますが、Sassを使うことで、通常のCSSではできないことができるようになります。

Sassは（サース）は「Syntactically Awesome Stylesheets」の略で、スクリプト言語になります。
プログラミング言語となると難しいイメージがついてしましますが、簡単な記述ではCSSの記述を少し崩した感じなので、そこまで抵抗はないでしょう。

Sassでどのようなことができるかと言うと、

・ネスト（入れ子）が使える
・変数が使える
・四則演算ができる

ect…

他にも、JavaScriptのように関数が使えたり、「@mixin」でコードを使い回したりと、まだまだできることは沢山あります。
一気に覚えるのは大変だと思いますので、まずは簡単な上記の3つを利用して体験し、それから徐々に覚えていきましょう。

構造をわかりやすく書きたかったり、作業効率・メンテナンス性の高いコードでWebサイトのCSSを設計していきたい場合は、Sassを活用すると良いです。

ここでは入門編として、簡単なコードを実際に書いてSassを体験してみましょう。

Sassを使うための環境準備

Sassを動かすにはRubyが必要になってきます。
ですので、PCにRubyとSassをインストールして環境を整えます。
Macの方は、Rubyがデフォルトで入っていますので、あとはSassをインストールして準備していきます。
Windows PCの方は、RubyとSassの両方をインストールします。

Sassのファイルは、コンパイルしてCSSとして生成する必要があります。
そのためコンパイルするツールを使っていくことになりますが、GUIコンパイラとして便利な無料のツール（koala、prepros等）を使ってもいいですが、あれこれPCに入れなくても意外と簡単にコンパイル出来てしまいますので、GUIコンパイラを使わず、コマンド操作でコンパイルする方法でご紹介していきます。

また、コードエディタは「Sublime Text」、「Atom」、「Visual Studio Code」と人気のコードエディタでしたらなんでもいいですが、個人的にはコマンドプロンプトやターミナルが一緒に使えるコードエディタがいいので、Visual Studio Codeが良いかと思います。

Windows PCでの環境準備

Windows PCの環境準備については、Rubyのインストールからお話すると長くなりますので、別の記事でご紹介しています。
流れはとてもシンプルです。下記の記事を参考に環境準備を行ってください。

↓　↓　↓

Windows PCにRubyとSassをインストールする

環境準備後のSassの利用はMacと変わりはませんので、ここからはMacで説明を進めていきます。

Macでの環境準備

MacはデフォルトでRubyが入っていますので、残りSassをインストールしていきます。
一応、Rubyの確認も一緒にやっておきましょうか。

ターミナルを立ち上げて、「ruby -v」としてバージョンを確認します。
続いて、以下のコマンドを実行してSassをインストールします。

sudo gem install sass

コマンドを実行するとインストール作業が始まり、最後に「installed」とメッセージがでればインストール完了です。

もし確認される場合は、以下のコマンドで確認できます。

sass -v

はい。
ここまででSassを使う環境が整いました。

それでは、早速Sassを体験してみましょう。

Sassの利用

サンプルとして、変数の利用とネスト（入れ子）構造で書いてみます。
作業ディレクトリはデスクトップで行います。
ディレクトリ構造は以下のように、Sassのディレクトリでわかりやすくファイルを管理していきます。
cssディレクトリは、コンパイルして生成したCSSファイルを管理するために用意します。

「.scss」という拡張子のファイルを用意します。
名前は「style」としておきました。

ファイルを用意できたら、コードエディタでファイルを開き、HTMLと一緒に以下のSassのコードを書いていきましょう。

HTML

<section>
  <h2>Sass Sample</h2>
</section>

Sass

$ttl-bg: #f3e6cf;
$ttl-color: #e47400;

section{
  background: $ttl-bg;
  h2{
    color: $ttl-color;
  }
}

「$」で変数を使うことができます。
変数で格納する値を指定し、セレクタに対するスタイルを、CSSプロパティで変数を使いながら記述します。
サンプルでは、section要素のbackgroundとh2要素のcolorを、変数の値として指定してみました。

ちなみに、ネストでは「&」を使うと、セレクタの親要素を取得することができます。

HTML

<section>
  <h2>Sass Sample</h2>
</section>
<div class="sample">
  <section>
    <h2>Sass Sample</h2>
  </section>
</div>

Sass

section{
  background: $ttl-bg;
  h2{
    color: $ttl-color;
    .sample & { //セレクタは「.sample section h2」となる
      background: #444;
    }
  }
}

慣れてきたら使えるようにしましょう。

では、ここからSassのコードをコンパイルして、CSSファイルを生成していきます。

ターミナルを立ち上げて、作業しやすいようにcdコマンドを使いながら、「sample-sass」のディレクトリまで移動します。

サンプルではわかりやすく一階層ごと移動していますが、「cd Desktop/sample-sass」として一気に移動してもらっても構いません。
一応、pwdコマンドでカレントディレクトリ（現在の場所）を確認しておきます。

コマンド操作については、以下の記事でご紹介しています。

↓　↓　↓

Macのターミナルの簡単な使い方と便利な設定

そして、以下のようにsassコマンドで、SassファイルをコンパイルしてCSSを生成します。

sass sass/style.scss:css/style.css

無事コンパイルできたら、cssディレクトリにstyle.cssが生成されます。
一緒に生成される.mapファイルは、cssファイルをsassファイルと結びつけるような情報が記述されていますが、とくに気にする必要はなく、そのまま置いておきましょう。

生成されたcssファイルを見ると、変数やネストのセレクタも展開されているのが確認できます。
cssの構造が複雑になればなるほど、そのSassの威力が発揮されます。

ただ、ネスト構造のインデントが残ります。
ファイルサイズのこともありますし、cssファイルではインデントはそこまで必要ありません。

sassコマンドでは「–style」のオプションで、生成するスタイルを決めることができます。
オプションを指定していない場合は、デフォルトの「nested」のネスト構造になります。

ここからは、コードエディタでコマンド操作をしてみようと思います。
Visual Studio Codeでターミナルを起動します。
画面上部のエディタメニューの「Terminal」から「New Terminal」を選択すると、エディタ下部にターミナルが起動します。

Visual Studio Codeでターミナルを起動すると、自動でコードエディタで開いているディレクトリに移動します。
pwdコマンドでもカレントディレクトリが確認できます。

コードエディタでターミナルが操作できるなんて便利な時代です。

Windows PCの場合は、少し設定を触る必要があります。
以下の記事でご紹介しています。

↓　↓　↓

WindowsのVisual Studio Codeでコマンドプロンプトを利用する

通常のcss構造の場合は、

Expanded

sass sass/style.scss:css/style.css --style expanded

section {
  background: #f3e6cf;
}
section h2 {
  color: #e47400;
}

他、コンパクトにしたい場合は、

Compact

sass sass/style.scss:css/style.css --style compact

section { background: #f3e6cf; }
section h2 { color: #e47400; }

ファイルサイズを極力小さくしたい場合は、圧縮版としてcssファイルを生成すると良いでしょう。

Compressed

sass sass/style.scss:css/style.css --style compressed

section{background:#f3e6cf}section h2{color:#e47400}

WindowsのコマンドプロンプトやMacのターミナルでは、一度打ったコマンドを上矢印キーを押すことで、一つ前のコマンドを表示したり履歴を追えますので、一度コンパイルでコマンドを打ったら、あとは上矢印キーとEnterキーのみで手間をかけずにコンパイル作業が行えます。

実際のSassの利用、記述、コンパイルの動きはこちら。
動画（3分ほど）

Sassはネストや変数、またここではご紹介していない関数の概念やコードを使い回すことができる機能など、CSSのアニメーションを含めデザインの幅が広がりますので、今後Sassを使っていけるよう、まずは利用できる環境の準備をしていただき、簡単な使い方を実際に体験して慣れていきましょう。

ここでは触れませんでしたが、@mixin（ミックスイン）の使い方については、以下の記事でご紹介しています。

↓　↓　↓

Sassの基礎、@mixin（ミックスイン）の使い方

今回は、ターミナルでのコマンド操作で、Sass（scss）ファイルをコンパイルしてCSSファイルを生成しましたが、Visual Studio Codeを利用しているのであれば、拡張機能を使ってSassファイルの保存時に自動コンパイルすることができます。

Sassファイルの自動コンパイルについては、以下の記事でご紹介しています。

↓　↓　↓

Visual Studio CodeでSassを自動でコンパイルする

また、今後主流になるSassの記法として、Dart Sass（ダートサス）で記述していくことになると思います。
以下の記事で、Dart Sassの記法も含めたSassファイルの管理や、自動コンパイルの方法についてご紹介しています。

↓　↓　↓

Sassファイルの管理方法。ディレクトリ構造（フォルダ・ファイル構成）

DartJS Sass Compiler and Sass WatcherでSassを自動コンパイル