MVCSSを使ってみる 1
MVCSSでcompassを使う
sassが前提となっていますので先にインストールして下さい。
compassをインストールしますが、今回はモジュールとして利用するのでプロジェクトの作成は必要ありません。
compassでコンパイルするのでconfig.rbをディレクトリに追加します
css_dir = “.”
sass_dir = “.”
output_style = :expanded
MVCSS on GitHubから基本構成をclon(またはzipダウンロード)して配置して下さい。
前回の記事の通りのディレクトリ構成になっていると思います。
実際に書いてみる
今回はMVCSSに集中するためにgruntなどは利用しません。
$compass compile application.sass
確認用にapplication.cssを読み込むhtmlも準備します。
メッセージのリストをタイムライン風にデザインしてみたいと思います。
<!DOCTYPE html> <html lang='ja-JP'> <head> <meta charset='UTF–8'> <link rel='stylesheet' href='application.css' /> </head> <body> <!– header –> <header> <h1>タイムライン風にしてみるよ</h1> </header> <!– article –> <article> <!– section1 –> <section> <h2>FrogEggのメッセージ<h2> <p>最近更新されたFrogEggのメッセージです!</p> </section> <!– section2 –> <section> <ul> <li>さぁ、帰るぞ!</li> <li>ちょい残業になりました。。</li> <li>ちょっと休憩行ってきます</li> <li>さぁ、午後も頑張るぞ!</li> <li>そろそろお昼かなー？</li> <li>今日は雪ですよ!</li> <li>こんにちは世界!</li> </ul> </section> </article> </body> </html>
application.sassの編集
適当なエディタで開いてcompassインポートの記述を追加します。
// ————————————- // Compass // ————————————- // Import Compass here… @import 'compass' // ↑ これを追加する!
_settings.sassの編集
色設定を変更してみます。
好きな色を設定して下さい。
今回はそれぞれ下記のように設定してみました。
$base-background: #96d1f0 $base-color: #000 $base-link-color: #e5486c
試しにコンパイル
コンパイルしてindex.htmlを開いてみましょう。
背景色や文字色が変更せれいるのが分かると思います。
$compass compile application.sass
少し長くなったので続きは次回まとめます。
このページを読んだ人にオススメのブログ記事です！
About The Author
