WEBサイトを制作する際に、コンパイラを使用して製作することが増えてきています。
今回はその中でもメジャーなSASSについて、これからSASSを扱えるようにするための環境構築方法のご案内をしておきたいと思います。

SASSとは

SASS（Syntactically Awesome Style Sheets）とは、CSSを拡張したメタ言語（プリプロセッサー）のことです。CSSを使った開発を効率的に行えるようにすることができます。

SASSには2種類の記述方法があります。SASS文法とSCSS文法（Sassy CSS）の2つです。
SASSを利用する場合は拡張子を「.sass」に、SCSSの場合は「.scss」にします。

SASS（ruby/hamlのような書き方に見えるといわれます）

#test
    width: 1000px
    margin: 0 auto
    .class
        width: 250px
        border-bottom: 1px solid #000

SCSS（css3のような書き方に見えるといわれます）

#test{
    width: 1000px;
    margin: 0 auto;
    .class{
        width: 250px;
        border-bottom: 1px solid #000;
    }
}

どちらの場合も、ファイルをコンパイルするとCSSファイルが生成される仕組みになっています。
SASSはCSSを拡張した言語なので、HTML＋CSSの知識が必須です。
またCSSもしっかりと設計できるようになっておく必要があります。
設計されたCSSほどSASSが生きてくるのではないかと思います。

最初は少し面倒ですが、慣れてしまうとCSSを直接書くことが嫌になり、SASSから離れられなくなるほどCSSを効率的にすることができます。

インストール方法

SASSを利用するには以下が必要です。

1. Ruby　　Macはデフォルトでインストールされています。
2. Sass本体

１．Rubyインストール

Windowsの人

以下からダウンロードしてインストールしてください。
https://rubyinstaller.org/downloads/

インストール時のオプションの注意事項として、『Rubyの実行ファイルへ環境変数PATHを設定する』にチェックを入れておきましょう。これをチェックしておかないとコマンドプロンプトなどからrubyを実行する際にパスなしでRubyが実行できないのでご注意ください。
また、『.rbと.rbwファイルをRubyに関連づける』にチェックしておくと自動で.rbファイルをRubyのファイルとして扱ってくれるのでチェックしておくとよい可と思います。チェックしなくても問題はないです。

インストールが終わったら、コマンドプロンプトで以下を実行し、rubyのバージョンが表示されるか確認しましょう。

ruby -v

Rubyのバージョンが表示されればrubyがインストールされているとして確認できます。
Macでも念のためやってみましょう。

２．Sassのインストール

SASSのインストールはGemで行います。
GemとはRubyのパッケージ管理ツールで、Rubyに付属しているツールで、Ruby用のライブラリを簡単に管理することができるツールです。
正式名称は[RubyGems]といいます。

Gemがインストールされているか確認しておきましょう。

gem -v

gemのバージョンが表示されていれば問題ありません。

rubyのライブラリは主に以下で管理されているので以下から探すこともできますし、
コマンドで探すこともできます。
https://rubygems.org/

コマンドの場合

gem search -r

SASSのライブラリを探す場合

gem search -r sass

それではSASSをインストールしましょう。

Windowsの場合

コマンドプロンプトから
まず、日本語の場合文字化けしてしまう可能性があるため文字コードをセットしておきましょう。

set LANG=ja_JP.UTF-8

gemを最新版にしておきましょう

gem update --system

gemを使用してsassをインストールしましょう

gem install sass

バージョンを確認してインストールされていることを確認しましょう

sass -v

sassをバージョンアップする場合は

gem update sass

アンインストールは

gem uninstall sass

Macの場合

ターミナルからGemのアップデートをしておきましょう

sudo gem update --system

Gemを使用してsassをインストールしましょう

gem install sass

ERROR: While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

となった場合は以下のようにしてインストールを試してみてください。

sudo gem install -n /usr/local/bin sass

バージョンを確認してインストールされていることを確認しましょう

sass -v

SASSをバージョンアップする場合は

sudo gem update sass

アンインストールは

sudo gem uninstall sass

以上でSASSが利用できる環境が整ったのではないかと思います。
このあと実際にSASSを動かして、CSSを効率的に作成してみましょう。

東京四谷校では2017年のShiftupセミナーでSASSの入門セミナーを開催します。
今回のSASSインストールの続きはぜひSASS入門セミナーにご参加いただきお試しいただければと思います。

■始めるきっかけに！SASS入門セミナー■

日時：9月6日（水）19:00～20:30
定員：12名
開場：18:30～
場所：Akros Web & Business Design Academy　四谷校
東京都新宿区四谷1丁目8-14　四谷一丁目ビル6F　ビジネスセンター四谷
お申し込みはこちらから