第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

ファイルダウンロード