ITかあさん初めてのSass
ITかあさん初めてのSass
そんな訳でITかあさんは今日初めてちゃんとSass環境を整え、今日初めてコンパイルを行いました。忘れないためにもきちんと書き記しておこうと思います。なお、Mac環境での構築で話を進めますのでWindows,Linuxの方はごめんなさい。
Sass環境を整える手順
Sassのインストールは下記5ステップ。なお、コンパイルには色々便利なGUIツールがあると存じますが、GUIよりもターミナルが楽なので（個人的に）今回はターミナルからコマンドを実行してSassのコンパイルを行いたいと思います。
- 1.Rubyのインストまたはアップデート
- 2.Gemのアップデートとインスト
- 3.Sassインスト
- 4.初めてのコンパイル
Rubyのバージョン確認
Sassの公式によると、エンコーディングでグッドなサポートはしてないから、Rubyのバージョンは1.9以上じゃないとだめよということを言っていますので、Rubyのバージョンが1.9以上であることを確認し、1.9より低いバージョンであればRubyのバージョンをまずは上げましょう
Sass Changelog
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
gem update
Ruby言語用のパッケージ管理がRubygemです。
Rubyがインストされていればgemは一緒に入っているはずですが古いバージョンであることが多いので、最新のパッケージにしてあげましょう。
Updating rubygems-update
Fetching: rubygems-update-2.5.0.gem (100%)
Successfully installed rubygems-update-2.5.0
Parsing documentation for rubygems-update-2.5.0
Installing ri documentation for rubygems-update-2.5.0
Installing darkfish documentation for rubygems-update-2.5.0
Installing RubyGems 2.5.0
RubyGems 2.5.0 installed
Parsing documentation for rubygems-2.5.0
Installing ri documentation for rubygems-2.5.0
gem updateが終了したら、gemでSassのインストをします
Sassはgemでインストールをします。
Successfully installed sass-3.4.19
Parsing documentation for sass-3.4.19
1 gem installed
matsudachihiro$ sass -v
Sass 3.4.19 (Selective Steve)
これでSassのインストールは完了しました。
初めてのコンパイル
これで環境は整ったので後は初めてのコンパイルです。
SCSSでは普通のCSSでも書けるよ、という知識くらいは持っているので一先ず普通のCSSを今回は書きました。ディレクトリ構成は下記の通り。
sassフォルダを作って、sassフォルダにstyle.scssというファイルを作り、コンパイル実行でstyle.cssがcssフォルダに作られればOK
∟/sass/style.scss
∟/css/style.css（コンパイルされるとstyle.cssが生成される）
カレントディレクトリ（現在自分がいる場所）がpublic_htmlだとしたらコマンドは下記の通り
>>> Sass is watching for changes. Press Ctrl-C to stop.
write css/style.css
write css/style.css.map
sass（scssがあるフォルダ）:css（コンパイルされたファイルの生成場所）
コンパイルするコマンドを実行するとしばらくしてファイルが生成されます。パスが間違っていて生成に失敗するとエラーがでます。
細かいコンパイルのオプションについてはまた今度！
今日もお疲れさまでした！