HTML5勉強会名古屋 #3 デモ用プロジェクト

デモで使用したプロジェクトは実際にインストールして動かしてみることができます。
開発マシンにMacを使用していて手軽に試してみたい人はCodeKitを使って動かしてみてください。
Windows, Linux, MacでRubyが動作する環境であればTerminalからコマンドラインで実行できます。

CodeKitを使う人へ

CodeKitで手軽に動かしたい人向けです

次のURLからファイルをダウンロード

https://github.com/subak/html5_nagoya_3/archive/master.zip

適当な場所へファイルを解答
CodeKitを起動して解答してできたフォルダをドラッグアンドドロップ
変換したいSCSSまたはSassファイルを選択
右下の Compile ボタンをクリック

Terminalを使う人へ

Terminalから直接コマンドを叩く人向けです

動作環境

下記のソフトウェアがインストールされていること

git
ruby
rake
bundler

Sass・Compassのインストール

$ git clone git://github.com/subak/html5_nagoya_3.git
$ cd html5_nagoya_3
$ bundle install --path vendor/bundle

使い方

# SCSSまたはSassファイルをCSSに変換
$ rake sass:compile

# キャッシュおよび生成ファイルの削除
$ rake sass:clean

# 更に詳しい使い方など
$ bundle exec sass --help

ファイル構成

├── assets
│   └── sass                       # Sassのソースディレクトリ。ここにSassファイルを置く
│       ├── demo.sass              # DEMOで使用したSassファイル
│       └── lib
│           └── retina-sprite.sass # Retina対応のSpriteを扱うmixinが定義されている
└── public
    ├── assets
    │   └── stylesheets            # SassファイルからコンパイルされたCSSが保存される
    │       └── demo.css           
    │   └── images
    │       └── sprite             # CSSスプライト生成時に結合される画像を入れておく
    │           ├── apple.png
    │           ├── cherries.png
    │           ├── coconut.png
    │           ├── grapes.png
    │           ├── kiwi.png
    │           ├── lemon.png
    │           ├── lime.png
    │           └── peach.png
    └── index.html

subak/html5_nagoya_3

HTML5勉強会 名古屋 #3 デモ用プロジェクト