第2章 Sassの利用環境を整えよう
2-5 バッチファイル／シェルスクリプトで簡単にコマンドを実行する
まずはSassファイルを用意する
#main {
width: 600px;
p {
margin: 0 0 1em;
em {
color: #f00;
}
}
small {
font-size: small;
}
}
sassコマンドの書き方
sass [options] [INPUT]:[OUTPUT]
コンパイルしてみる
sass test.scss:test.css
#main {
width: 600px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }
#main small {
font-size: small; }
cdコマンド
cd folder/name/path
ルートに移動
cd /
一つ上の階層に
cd ../
二つ上の階層に
cd ../../
ホームフォルダに移動する（Macのみ）
cd
cd ~
違うドライブに移動する（Windowのみ）
cd /d D:¥folder¥name¥path
スタイルの指定方法（--style）
sass test.scss:test.css --style expanded
Nested
sass test.scss:test.css --style nested
#main {
width: 600px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }
#main small {
font-size: small; }
Expanded
sass test.scss:test.css --style expanded
#main {
width: 600px;
}
#main p {
margin: 0 0 1em;
}
#main p em {
color: #f00;
}
#main small {
font-size: small;
color: #00f;
}
Compact
sass test.scss:test.css --style compact
#main { width: 600px; }
#main p { margin: 0 0 1em; }
#main p em { color: #f00; }
#main small { font-size: small; }
nav { height: 300px; }
nav ul { overflow: hidden; }
Compressed
sass test.scss:test.css --style compressed
#main{width:600px}#main p{margin:0 0 1em}#main p em{color:#f00}#main small{font-size:small}
SCSSファイルの更新を監視する（--watch）
sass --watch input.scss:output.css
相対パスで指定
sass --watch input.scss:css/output.css
フォルダ単位で更新を監視する
フォルダ一つだけ指定
sass --watch input
現在地を指定
sass --watch .
インプットフォルダ・アウトプットフォルダを指定
sass --watch input:output
相対パスで指定
sass --watch input:css/output
Watchオプションで表示されるメッセージ
>>> Sass is watching for changes. Press Ctrl-C to stop.
コンパイルメッセージ
overwrite output.css
フォルダ作成メッセージ
directory css
構文エラーメッセージ
error sass/ test.scss (Line 12: Invalid CSS after " }": expected "}", was "")
フォルダかファイルがない場合のエラーメッセージ
error No such file or directory - ファイル名またはフォルダ名
他のオプションと組み合わせて使う
sass --watch --style expanded scss:css
キャッシュフォルダを違う場所にする（--cache-location）
sass --watch test --cache-location フォルダ名
（例）「test」フォルダ内の「.sass-cache」フォルダを指定
sass --watch test --cache-location test
（例）ドライブ直下の「.sass-cache」フォルダを指定
【Win】sass --watch test --cache-location /.sass-cache 【Mac】sass --watch test --cache-location C:¥.sass-cache
キャッシュフォルダを作らない（--no-cache）
sass --watch test --no-cache
その他のコマンド
scssコマンド
scss [sassと同じオプション]
現在地を知る
【Win】cd 【Mac】pwd
フォルダ・ファイルの一覧を表示する
【Win】dir
【Mac】ls
その他のSassオプション
ヘルプを表示する（--help）
sass --help
エラーがおこると停止する（--stop-on-error）
sass --stop-on-error --watch sass
SCSSファイルの位置のコメントを残す（--line-comments）
sass --line-comments
Windows --バッチファイル--
コマンド
cd /d %~dp0 sass --watch sass:css
（例）アウトプットスタイルをコメントで使い分け
cd /d %~dp0 ::sass --watch -t nested sass:css ::sass --watch -t expented sass:css sass --watch -t compact sass:css ::sass --watch -t compressed sass:css
Mac --シェルスクリプト--
空のファイルを作成
touch filename.command
コマンド
#!/bin/sh cd $(dirname $0) sass --watch sass:css
（例）アウトプットスタイルをコメントで使い分け
#!/bin/sh cd $(dirname $0) #sass --watch -t nested sass:css #sass --watch -t expented sass:css sass --watch -t compact sass:css #sass --watch -t compressed sass:css