コマンドでみるSassの基本と出力スタイル
CSS Preprocessor Advent Calendar 2012の14日目の記事です。
Sassを自分の関わるいろいろな案件で取り入れ始めて数ヶ月たちました。ただ未だにうまくいかないところもありつつ、日々使い方を模索しつつ構成をかんがえてやっている状況です。構成の基本は、CSS Preprocessor Advent Calendar 2012の10日目に@Takazudoさんが書いているように、OOCSSを念頭におきつつ構成しようと取り組んでいます。
さて今回は使っている内容あれこれとかも考えましたが、簡単に基本的なところを。コマンド叩いてコンパイルのところを書いていこうと思います。
Sassの構造模索中
今日の本題に入る前に余談から。
一人やOOCSSを理解する人でプロジェクトを進める場合はOOCSSで構成していくのは問題ないのですが、CSSが苦手な人と複数が同時に進めるようなプロジェクトの場合は（そんな場合って少ないかもしれないですが、現在の私はCSSが不得手だけとHTMLを書く人というプログラマさんが4〜6名いるなかで進めています）、必要なclassが複数あるとなるとclassが想定以上にはいっていたり、想定以外の使われ方をしてしまうため、なかなかうまく取り入れられなかったりします。
CSSが苦手な人に、「このスタイル構成で進めてください」として伝えるために、@hilokiさんが7日目の記事で書いている「CSSプリプロセッサでスタイルガイド」ようなスタイルガイドを書きだしていくようなツールは必須になりそうです。
さて、模索しているうんぬんの話はおいといて、今日の内容。コマンドでやってみようとかそういう話を簡単に。
書いたSassのコードはそのままではブラウザでは表示できないのですがコンパイルすることでCSSとして機能します。Sassコードをコンパイルするためには、西畑さんが12日目に「CodeKitで簡単にCSS Preprocessorを利用する！」で書いているように、CodeKitを使う方が楽かもしれないですが、自分は最初にターミナルでSassの保存を監視して使うようにしています。
デザイナーにとっての黒画面
デザイナーにとって、黒画面をつかってコマンドで処理を行うというのは、敷居が高かったりして使うのが苦手という人が多いです。自分も以前はそのひとりで、ターミナルでコマンドを入力して何かを行うということは苦手でした。
しかし、Sassのコマンドを入れるくらいでしたらそんな大したことなかったので、仕事する前に一度起動しておいて、あとはウィンドウをしまってそのままにしています。
黒い画面については以前に書いた「黒い画面と少し戦ってみている」で使ってみていることを書いておきました。
Sassを使う流れ
Sassを使う概要としての流れのおさらい
1: Sassファイルの作成（xxx.scss） 2: CSSファイル作成のコマンドへのコンパイル（xxx.scss → コンパイル） 3: コンパイル完了（xxx.scss → コンパイル → xxx.css）
コマンドによるSass
Sassのコマンドを入力するためのステップは以下のようにしています
１．Sassを使うディレクトリまで移動
黒画面でもディレクトリの移動が必要です。MacでいうところのFinderで使うためのディレクトリを選択する作業です。マウスとクリック移動するほうが楽なのはわかりますが、コマンドでもちょちょっと入れるだけです（※1）。
cd ディレクトリパス
ディレクトリの移動はcdというコマンドで、スペースを一つあけてから、プロジェクトが保存してあるディレクトリまでのパス（ディレクトリの階層をたどる道）を入力です。ここだけはそれぞれのPC環境内のどこに保存しているのかによりますので、省略。
ちなみに自分はworksというフォルダにひと通りまとめて作業用のプロジェクトをまとめているので、そこまでのパスを入力することになります。
もし入力するパスがわからなくても、使っているシェルというものによりますが、基本的にはtabキーを押すことで、候補がズラッと出てきてくれるようです。それをみて入力して移動するのが楽だと思います。僕の使っているzshのシェルもtabキーを押すことで一覧がでてきてくれて、それを選択しているだけで移動ができるようにしています。
２．Sassファイルとコンパイル後のファイル
Sassのファイルとコンパイル後のファイルをコマンドで指定してコンパイルをします。下記の例はstyle.scssファイルをstyle.cssファイル
// sass コンパイル前xxx.scss:コンパイル後xxx.css
sass sass/style.scss:css/style.css
しかし毎回このコマンドを叩いているのは面倒だし、保存後にすぐに確認できるほうがいい。
Sassには保存を監視してくれるためのコマンドがあるので、それを使います。
３．Sassファイルの保存の監視
単体のファイルを監視する場合は下記
// sass --watch コンパイル前xxx.scss コンパイル後xxx.css sass --watch sass/style.scss:css/style.css
ディレクトリごと監視するためには
// sass --watch コンパイル前xxx.scss コンパイル後xxx.css sass --watch sass:css
４．コンパイル後のスタイル
デフォルトの状態でコンパイルをすると、ネストでインデントされたコードが出力されます
SassのTutorialでのコードを参考にみてみましょう
【コンパイル前】
/* style.scss */
#navbar {
width: 80%;
height: 23px;
ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}
【コンパイル後】
/* style.css */
#navbar {
width: 80%;
height: 23px; }
#navbar ul {
list-style-type: none; }
#navbar li {
float: left; }
#navbar li a {
font-weight: bold; }
これはコンパイル後のスタイルがデフォルトではcompressedの形式をとっているからです。
Sassにはコンパイル後のスタイル（Output Style）が４種類用意されていて、それをコマンドで指定しておくことができます。
ひと通りみてみましょう
:nested
ネストがインデントされた形式での出力
// --style nested sass sass/style.scss:sass/style.css --style nested
【コンパイル後】
#navbar {
width: 80%;
height: 23px; }
#navbar ul {
list-style-type: none; }
#navbar li {
float: left; }
#navbar li a {
font-weight: bold; }
:expanded
ネストのインデントがない状態での出力。自分は通常のCSSはこの形で出力しているので、納品するような形式で指定がなければ基本はこの形にしていることが多いです。
// --style expanded sass sass/style.scss:sass/style.css --style expanded
【コンパイル後】
#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-weight: bold;
}
:compact
セレクタごとに１行ずつにコンパクトになった形式。プロジェクト進行中などはこの形式で進めて多少は軽量化して読み込んでいることが多いです。個人的には行数が確認できるのでこの形式が楽だと思っています。
// --style compact sass sass/style.scss:sass/style.css --style compact
【コンパイル後】
#navbar { width: 80%; height: 23px; }
#navbar ul { list-style-type: none; }
#navbar li { float: left; }
#navbar li a { font-weight: bold; }
:compressed
全てを一行内にまとめた形式。一番軽量。
// --style compressed sass sass/style.scss:sass/style.css --style compressed
【コンパイル後】
#navbar{width:80%;height:23px}#navbar ul{list-style-type:none}#navbar li{float:left}#navbar li a{font-weight:bold}
コマンドちょっと追加するだけで変更可能なので、その時々によって形式を選べるようになっています。いろんなツールを使う場合でも、このへんの設定が最初にあったりしますよね。
キャッシュを作らない
Sassをコマンドで叩いていると気づくと思うのですが、.sass-cacheというフォルダが自動的にでてきます。基本的には出力されていても無視したらいいのですが、これを作りたくないという場合もあるかもしれません（あるのか？）そんな場合はコマンドにちょっと加えるだけで出力されないようになります。
--no-cache
--no-cacheのコマンドを追加するだけです
// --no-cache sass sass/style.scss:sass/style.css --no-cache
これでキャッシュを作らずにコンパイルすることができます。
自分がよく使っているコマンド
ここまでいろいろ書きましたが、最終的に自分は下記のような形でコマンドたたいて、あとは放置しておいてます。
sass --watch sass:css --style compact --no-cache
以上簡単に基本を。みなさんはどのように使っているでしょうか？ツールを使うのも楽ですが、コマンドだって一度コマンド入力したあとは何も面倒なことはないので、これだけですので、面倒なければツール使わずにターミナルなど使うのはどうでしょうか？
※1：移動しておかなくても使えますがわかりやすいように移動しています
