SASSを使って効率化しよう！ - Webデザイン・プログラミングオンライン個別指導のAkros

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のような書き方に見えるといわれます）
[css] #test
width: 1000px
margin: 0 auto
.class
width: 250px
border-bottom: 1px solid #000
[/css] SCSS（css3のような書き方に見えるといわれます）
[css] #test{
width: 1000px;
margin: 0 auto;
.class{
width: 250px;
border-bottom: 1px solid #000;
}
}
[/css] どちらの場合も、ファイルをコンパイルすると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のバージョンが表示されるか確認しましょう。
[bash]ruby -v[/bash]

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

２．Sassのインストール

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

Gemがインストールされているか確認しておきましょう。
[bash]gem -v[/bash] gemのバージョンが表示されていれば問題ありません。

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

コマンドの場合
[bash]gem search -r[/bash] SASSのライブラリを探す場合
[bash]gem search -r sass[/bash]

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

Windowsの場合

コマンドプロンプトから
まず、日本語の場合文字化けしてしまう可能性があるため文字コードをセットしておきましょう。
[bash]set LANG=ja_JP.UTF-8[/bash]

gemを最新版にしておきましょう
[bash]gem update –system[/bash]

gemを使用してsassをインストールしましょう
[bash]gem install sass[/bash]

バージョンを確認してインストールされていることを確認しましょう
[bash]sass -v[/bash]

sassをバージョンアップする場合は
[bash]gem update sass[/bash]

アンインストールは
[bash]gem uninstall sass[/bash]

Macの場合

ターミナルからGemのアップデートをしておきましょう
[bash]sudo gem update –system[/bash]

Gemを使用してsassをインストールしましょう
[bash]gem install sass[/bash] [bash] ERROR: While executing gem … (Errno::EPERM)
Operation not permitted – /usr/bin/sass
[/bash] となった場合は以下のようにしてインストールを試してみてください。
[bash]sudo gem install -n /usr/local/bin sass[/bash]

バージョンを確認してインストールされていることを確認しましょう
[bash]sass -v[/bash]

SASSをバージョンアップする場合は
[bash]sudo gem update sass[/bash]

アンインストールは
[bash]sudo gem uninstall sass[/bash]

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

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