@ Sass

Sassコマンドの使い方

コマンドラインからの Sass コマンドに関しての基本的な操作についてまとめてみます。

Sass を CSS にコンパイルする

Sass を CSS にコンパイルする手順は以下のようになります。

Sass ファイルを用意する。

「test.scss」を作成して、ホームディレクトリ < C:\Users\user\ > に格納します。

test.scss

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

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

コマンドプロンプトを起動して、次のコマンドを実行します。

command

$ sass test.scss:test.css

コンパイルの結果 < C:\Users\user\ > に「test.css」が作成されます。

test.css

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

アウトプットスタイルを指定する(Style オプション)

Sass コマンドに Style オプションを指定して、アウトプットスタイルを変更することができます。

スタイルの指定方法

Style オプションは「–sttyl」の後に半角スペースを空けて「スタイル(引数)」を指定します。

command

$ sass test.scss:test.css --style extend

アウトプットスタイルの種類

アウトプットスタイルには4種類あります。

Nested
Sass の階層をインデントで残すため、ネストされているようなコードになります。

command

$ sass test.scss:test.css --style nested

test.css

#main {
  width: 600px;
  background-color: #ffff80;
  padding: 10px; }
  #main p {
    margin: 0 0 1em; }
    #main p em {
      color: #f00; }
  #main small {
    font-size: small; }
Expanded
ルールセットとプロパティを1行ずつ改行した、可視性の高いスタイルです。

command

$ sass test.scss:test.css --style expanded

test.css

#main {
  width: 600px;
  background-color: #ffff80;
  padding: 10px;
}
#main p {
  margin: 0 0 1em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
}
Compact
セレクタとプロパティがシングルラインになります。ルールセットごとに改行されます。異なるネストグループは1行空行がはいります。

command

$ sass test.scss:test.css --style compact

test.css

#main { width: 600px; background-color: #ffff80; padding: 10px; }
#main p { margin: 0 0 1em; }
#main p em { color: #f00; }
#main small { font-size: small; }
Compressed
サイズ軽量化を優先し、インデントや改行をすべて取り除いて圧縮します。通常の CSS コメントも削除されます。

command

$ sass test.scss:test.css --style compressed

test.css

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