Sassってみよう!〜コンパイル編〜

(※当記事ではSass = SCSSとしています。)
前回のインストール編に続き、今回はコンパイル編
そもそも前回、何のためにSassをインストールしたかと言えば「コンパイル」するためです。せっかくのScssも、cssにコンパイルしないとそのままでは使えないのです。そこで、いつものごとく簡単に備忘録してみました。
この記事では「ターミナル」「Dreamweaver」でのケースをご紹介します。

ターミナルの場合

ターミナルを立ち上げ、目的のディレクトリまで移動します。

cd 「scssファイルのあるディレクトリ」

(※位置確認は「pwd」や「ls」コマンドで)
ちなみにcdコマンドの後に、目的のディレクトリをドラッグドロップでも移動できます。

あとはsassコマンドで、コンパイルしたい対象のscssファイル、ディレクトリの後に「:」で区切ってコンパイル先のcssファイル、ディレクトリを指定するだけ。

ファイル単位でコンパイルする場合
sass 「scssファイル」:「cssファイル」
ディレクトリ単位でコンパイルする場合
sass 「scssディレクトリ」:「cssディレクトリ」
sass 「scssディレクトリ」
sass style.scss:style.css

「--style」オプションで書式を指定

加えて「--style」オプションで書き出すcssの書式を指定できます。
「nested」… デフォルト値です。ネストがインデントされた状態で書き出されます。
「expanded」… ネストしてもインデントされません。よく目にする一般的なCSSの記法です。
「compact」… セレクタからプロパティ値まで1行で書き出されます。
「compressed」… コメント、インデント、改行を削除し圧縮します。

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

以上のコマンドだけで、意図したcssファイルが出力されます。

が、しかし、

scssを保存するたびにターミナルに切り替えてコンパイルするのも面倒ですよね。

そこで便利なのが「--watch」オプション

先程のコマンドに--watchを付けます。
これによりSassファイルを保存する度に、自動でcssファイルを書き出してくれます。

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

更に、この「--watch」オプションはフォルダ単位で監視すると、
Partialsファイルも自動更新されるので便利です。
※「--watch」オプションから抜ける時は「ctrl」+「C」を押します。
(>>> Sass is watching for changes. Press Ctrl-C to stop.)

Dreamweaverの場合

そんな便利な「--watch」オプションよりも
更に便利なのがDreamweaver「CSSプリプロセッサー」機能。

この機能を使うと、前回ご紹介したRubyのインストールやターミナルは必要ありませんし、設定もとても簡単です。

まず、「サイト」メニューの新規サイトダイアログから、任意のサイトを定義します。

次に同ダイアログの左ナビ部分「CSSプリプロセッサー」「一般」
「ファイルの保存時に自動コンパイルを有効にする」をチェックします。
ここでexpandedなどの「–style」オプションも設定できます。

「ソースと出力」から出力フォルダーとソースフォルダーを設定します。

設定はこれだけ。あとはscssファイルを保存すると、自動でcssファイルを出力してくれます。

・・・のはずなのですが、

私の環境では何故かmixinや変数を使ったscssはうまく出力できなかったり(私の書き方が悪いだけだと思うのですが原因は分かりません…。)、styleオプションがうまく適用されなかったりで、結局はターミナルを使っています・・・。
(※ターミナルではcdがうまいこと出来ないので、iTerm2を使用しています。)

CSSプリプロセッサーの詳しい設定などは公式サイトをご覧ください。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編 【第9回】@each @if @function編

SNSでもご購読できます。