Sassコマンドで直接コンパイルする

sass scss css

早速sassを使ってみようCommentsでは
koaraを使ってscssをコンパイルしたがsassコマンドで直接コンパイルもしてみよう。

sassコマンド [input]:[output]

まずコードが記述されている"style.scss"を
MacintoshHD > ユーザ　>　ユーザ名フォルダ（ホームフォルダ）に配置。

style.scssの中身はこちら

#main{
 width: 800px;
 height: 600px;
 	p{
	 margin: 20px;
	 color: #333;
	   em{
		   font-size: 0.8em;
	        }
	   }
}

このファイルをターミナルでsassコマンドを以下のように入力

sass style.scss:test.css

sass [sassファイル名]:[コンパイル出力したいファイル名]
これでアウトプットされたtest.cssの中身は...

#main {
  width: 800px;
  height: 600px; }
  #main p {
    margin: 20px;
    color: #333; }
    #main p em {
      font-size: 0.8em; }

とこのようになる。

現在地(ｶﾚﾝﾄﾞﾃﾞｨﾚｸﾄﾘ)について

scssをコンパイルする場所がホームフォルダでしかできないと不便ですので
現在地、カレントディレクトリを指定してどこでもコンパイルできるようにします。

そのためにCDコマンドを使います。
cd + フォルダパスで移動する場所を指定します。
このやりかたはHTMLやCSSの相対パスと使用は同じです。

cd ../      一つ上の階層
cd ../../   二つ上の階層
cd /   　　 ドライブのルートに移動
cd ~        ホームに移動

もっと楽な方法は、finder上のscssを格納してあるフォルダを
ターミナルウィンドウにドラッグ＆ドロップするだけで絶対パスが書き込まれます。