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

weblog

WEB全般の忘備録(HTML・CSS・JavaScript・PHPなど)

Windows環境にSCSS環境を構築する手順

WindowsにCSSプリプロセッサのSCSSを導入する手順メモです。

Rubyインストール

Macでは標準でインストールされているらしいですが、Windowsには入っていないので
公式サイトよりダウンロードします。

インストールの時、パスを通すことを忘れずに。(後でもできるけど)
インストールしたらコマンドプロンプトcygwinなんかで

ruby -v

と入力して

ruby 2.0.0p0

とバージョン情報が出たらインストール成功です。

Compassのインストール

CompassCSSを効率的に書くためのフレームワークのようです。
gemをアップデートして、compassをインストールします。

gem update --system
gem install compass

下記コマンドでバージョン情報が出たらインストール成功です、Commpassがインストールされたら自動的にScssもインストールされます。

compass -v

Compassを使う

作業ディレクトリにassetsディレクトリを作成してconfig.rbを作成します

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

scssディレクトリにscssファイルを作成します。
scssファイルに変更があったら自動的にcssファイルにコンパイルするように下記コマンドを実行して監視しておきます。

sass --style expanded --watch scss:css

これで下準備完了。

Scssの文法については今回は割愛しますが、
Rubyとすごく似てるっぽいです。mixinとかすごく便利。