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

2-6 GUI(Koala)でSassを使用する

Windowsでユーザー名が日本語の場合

gem install sass

プロジェクトファイルを用意する

#main {
	width: 600px;
	p {
		margin: 0 0 1em;
		em {
			color: #f00;
		}
	}
	small {
		font-size: small;
	}
}

プロジェクト設定

koala-config.json

// Sass project settings, you can edit it and set custom settings.
{
	"language": "sass",
	"http_path": "/",
	"sass_dir":".",
	"css_dir": ".",
	
	"options": {
		"output_style": "nested",
		"line_comments": false,
		"debug_info": false,
		"unix_newlines": false
	},

	"custom_options": [],
	"include_paths": [],
	"require_libs": []
}

インプット・アウトプットパスの設定

	"sass_dir":"scss",
	"css_dir": "css",

オプションの設定

	"options": {
		"output_style": "expanded",
		"line_comments": true,
		"debug_info": false,
		"unix_newlines": false
	},

その他の設定

	"custom_options": [],
	"include_paths": [],
	"require_libs": []

コンパイルする

アウトプットスタイルをexpanded、ラインコメントをオンした例

/* line 1, ../scss/test.scss */
#main {
  width: 600px;
}
/* line 3, ../scss/test.scss */
#main p {
  margin: 0 0 1em;
}
/* line 5, ../scss/test.scss */
#main p em {
  color: #f00;
}
/* line 9, ../scss/test.scss */
#main small {
  font-size: small;
}

アウトプットスタイルcompact＋ラインコメントオフを選んだ例

#main { width: 600px; }
#main p { margin: 0 0 1em; }
#main p em { color: #f00; }
#main small { font-size: small; }