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

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

ターミナルの場合

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

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

(※位置確認は「pwd」や「ls」で)

あとはsassコマンドで対象scssファイルの後に「:」で区切って
コンパイル先のcssファイルを指定するだけ。

sass 「scssファイル」:「cssファイル」
sass style.scss:style.css

加えて「--style」オプションで書式を指定できます

「nested」… デフォルト値です。ネスト箇所にインデントが付いて書き出されます。
「expanded」… ネスト箇所にインデントが付きません。よく目にする一般的なCSSの記法です。
「compact」… セレクタからプロパティ値まで1行で書き出されます。
「compressed」… コメント、インデント、改行を削除し圧縮します。

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

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

が、しかし、

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

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

先程のコマンドに--watchを付けます。

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

更に、この「--watch」オプションはフォルダ単位の自動更新も可能で、
Partialsで用いた@importされる_ファイルの保存も自動で更新されるので便利です。

sass scssディレクトリ:cssディレクトリ --style expanded --watch

※「--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オプションがうまく適用されなかったりで、
結局はターミナル使ったりしています・・・。
正常に使えればとても便利な機能なんですけどね。

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

SNSでもご購読できます。