Sassとは

「Syntactically Awesome StyleSheet」の略での日本語に訳しすと
Syntactically＝構文的に
Awesome＝ 素晴らしい
StyleSheet＝スタイルシート
になります。

深く突っ込んでみると

CSSを拡張したメタ言語

Sassの場合は「CSSに対して機能を拡張した言語」ということになります。
CSSをより効率的に書けるようにした言語ということになります。

SassはプログラムっぽくCSSを書く

プログラムっぽく書くことでコーディング効率やソースコードの保守性が上がります。
Sassは、関数や変数の処理を行うことができる点も保守性向上に一役買っています。

環境設定

Sassを使うには、Sass自体を編集する「エディタ」と、コンパイルしてCSSを吐き出すための「コンパイラ」が必要です。

がっつり使おうとすると「Ruby」が必要になってきます。Macユーザーはデフォルトで「Rudy」が入っているので大丈夫ですが、Windowsユーザーは「Rudy」のインストールが必要でちょっと面倒です。
GUIコンパイラをインストールすれば「Rudy」のインストールは必要なく簡単にコンパイルできます。
ここではフリーで使えてmac、windows両方に対応しているKoalaをインストールします

ソフトをダウンロードする

Koala公式サイト

公式サイトのドメインが切れている可能性はありますが、リンクをのせています。
他にもいくつかのDLサイトで配布されているのでそこから拾ってくると良いでしょう

windowsでインストール

実行ファイル（拡張子が.exeのもの）をダブルクリックしてインストールします
特に問題はないと思うのでそのままクリックしていけばいいと思います

以後開きたいときはスタートメニューから開けますのでそこから開くなり、面倒であればショートカットやタスクバーに固定しておくと便利かもしれません

macでのインストール

DLしたファイルをダブルクリックするとこのような画面が出てくるので左から右へドラッグアンドドロップするだけでOKです。

途中警告が入った場合は環境設定を開いていただいて「セキュリティとプライバシー」を開きます

開いたら下のほうにあるこのまま開くをクリックしてください

環境構築はこれで完了 どちらのOSでもUIは同じなのでインストール方法だけ使い分けてください

koalaの使い方

起動したらSassのファイルが入った作業用のフォルダをKoalaにドラッグアンドドロップします
※フォルダ名やファイル名に日本語などのマルチバイト文字が入っているとエラーになります

Sassファイルを選択すると画面右にオプションが表示されます。デフォルトで「Source Map」にチェックが入ってますが特に必要でなければ外しておきましょう。

Autoprefixの欄はチェックを入れると自動でベンダープレフィックスを付けてくれます。 付けておくと安心でしょう

アウトプットスタイルはCSSをコンパイルする際にどのようなスタイルにするかを設定します。「Output Style:」のドロップダウンメニューから選択できます。

• nested → 入れ子のような形で出力してくれます。
• expended → 普段目にするようなcssの形式で出力してくれます
• compact → セレクタごと1行にまとめた形で出力します
• compressed → 改行やインデントが全くなくなり全て1行にまとめられます

このgifではフォルダ名に日本語が入っていますがもちろんエラーになりますので気を付けてください

関連記事

Sass使ってみる-その②基本構文とか-

以前の記事の続きになります。 ここではSassのルールや基本的な構文を紹介します この記事の目次Sassの書き方「SASS」記法「SCSS」・・・。

関連記事

Sassを使ってみる-その③難しそうなところ-

この記事の目次@functionで関数を作る#{}@mixinと@includeで用意したコードを使いまわす@contentの使い方特定要素・・・。