第2章 Sassの利用環境を整えよう

2-4 Sassコマンドの使い方を覚えよう

サンプルのダウンロードページへ

まずは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(*3 -tのところに)
::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(*3 -tのところに)
#sass --watch -t expented sass:css
#コンパクトで書き出し
sass --watch -t compact sass:css
#sass --watch -t compressed sass:css