SassバージョンのZurb Foundationを使う
Posted by admin at 7:00 日時 2013/06/05
CSSフレームワークのFoundationにはカスタマイズダウンロードページがありますが、設定値を細かく変えながらテストしたいときには全く使えません。Sassを使ったほうがラクですよね。とりあえずインストール方法のメモです。Mac OS 10.8.3での話なので、他のプラットフォームだと違う可能性があります。
まず、Sassを使うためにRubyが必要になりますので、インストールしていないかたはこちらなどをご参考に。
【初心者向け】Mac OSX10.8(Mountain Lion)で Ruby on Railsを動かすための5ステップ
gemが使えるようになったら、ターミナルからzurb-foundationをインストールします。
$ sudo gem install zurb-foundation
compassを入れてない方は、compassもインストールしましょう
$ sudo gem install compass
zurb-foundationとcompassがインストールできたら、プロジェクトを作成します。HTMLファイルを置きたいフォルダの親フォルダに移動し、compass createコマンドでプロジェクトを作ります。
$ cd /path/to/parent-folder $ compass create myproject -r zurb-foundation --using foundation
プロジェクト名(ここではmyproject)のフォルダが作られ、その中にsassファイルなどなどがダウンロードされます。
myproject/sass/_normalize.scss
myproject/sass/_settings.scss
myproject/sass/app.scss
myproject/humans.txt
myproject/robots.txt
myproject/MIT-LICENSE.txt
myproject/javascripts/foundation/foundation.alerts.js
…
myproject/index.html
myproject/stylesheets/app.css
これでインストール完了。プロジェクトフォルダに移動し、watch開始するとSassファイルの変更が自動で反映されます
$ cd myproject $ compass watch Dear developers making use of FSSM in your projects, FSSM is essentially dead at this point. Further development will be taking place in the new shared guard/listen project. Please let us know if you need help transitioning! ^_^b - Travis Tilley >>> Compass is polling for changes. Press Ctrl-C to Stop.
なんだかメッセージに顔文字があってフレンドリーだ。
試しに、myproject/sass/_settings.scss の中の基本フォントサイズを書き換えてみる。
$base-font-size: 93.75% !default; // 14px
ターミナルを見ると、無事にCSSが上書きされたことが分かる。
>>> Change detected at 05:59:29 to: _settings.scss overwrite stylesheets/app.css
watchのストップは Ctrl+Cで。
公式サイトではさらにGitレポジトリを指定してのインストールなどが解説されています。