読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

Sass のインストールとコンパイル(Windows)

Sass CSS Ruby Windows

Sass のインストールとコンパイル(Windows)

今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。

Sass とは

sass-lang.com

Syntactically Awesome Style Sheets の略です。 効率的にCSS を書ける言語です。 CSSプリプロセッサ や CSSメタ言語とも呼ばれる。

ファイル形式は以下の2種類がある。

  • .sass(ruby/hamlライク)
  • .scss(css3ライク)

上記のファイルをRuby でコンパイルして、CSSファイルを生成します。 そのため、Ruby をインストールする必要があります。

Ruby のインストール

Windowsの場合、下記のインストーラでインストールできます。 PATH も忘れず設定しておく。

RubyInstaller for Windows

Ruby をすでにインストールしている場合、 以下のコマンドで、gem を最新版にupdate しておく。

          

gem update --system

Sass のインストール

以下のコマンドでインストールできます。

 

gem install sass

Sass のバージョン確認

Sass を正常にインストールできたか確認するために、バージョンを確認する。 以下のコマンドで確認できる。

          
sass -v

以下のようにバージョンが表示される。

「sass --v」 でsassのバージョン確認

コンパイル方法

下記のように、sass コマンドでコンパイルできる。

          

sass [SASS_FILE_NAME].scss [CSS_FILE_NAME].css

スタイル変更

--style オプションで、CSSファイルのスタイルを変更できます。

nested


sass --style nested [SASS_FILE_NAME].scss [CSS_FILE_NAME].css

デフォルトのスタイルです。下記のように、ネスト構造を維持して出力されます。

Output CSS
          

#main {
 color: #fff;
 background-color: #000; }
 #main p {
  width: 10em; }

expanded


sass --style expanded [SASS_FILE_NAME].scss [CSS_FILE_NAME].css

一般的なCSSファイルの形式です。基本この形式で問題無いと思います。

Output CSS
          

#main {
 color: #fff;
 background-color: #000;
}
#main p {
  width: 10em;
}

compact

          

sass --style compact [SASS_FILE_NAME].scss [CSS_FILE_NAME].css

各セレクタを1行ずつ表示します。

Output CSS
          

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

compressed

          

sass --style compressed [SASS_FILE_NAME].scss [CSS_FILE_NAME].css

1行で表示します。CSSファイルを圧縮したい場合に使えます。

Output CSS
          

#main{color:#fff;background-color:#000}#main p{width:10em}

自動コンパイル

SASSファイルが編集されたら、自動でコンパイルをして、CSSファイルを生成するといったこともできます。 --watch オプションを使います。

          

sass --style expanded --watch [SASS_FOLDER_NAME]:[CSS_FOLDER_NAME]

まとめ

Sassでは、CSSの構造がわかりやくなったり、自動コンパイル機能もあったりとメリットがあるので、 これからCSSを書くときは、Sassで書いて問題無いかと思います。

次回からSassの基本的な機能であるネスト構造、演算、変数などの書き方をまとめる予定です。