cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

MVCSSを使ってみる 1

MVCSSでcompassを使う

sassが前提となっていますので先にインストールして下さい。
compassをインストールしますが、今回はモジュールとして利用するのでプロジェクトの作成は必要ありません。
compassでコンパイルするのでconfig.rbをディレクトリに追加します

css_dir = “.”
sass_dir = “.”
output_style = :expanded

MVCSS on GitHubから基本構成をclon(またはzipダウンロード)して配置して下さい。
前回の記事の通りのディレクトリ構成になっていると思います。
1

実際に書いてみる

今回はMVCSSに集中するためにgruntなどは利用しません。

$compass compile application.sass

確認用にapplication.cssを読み込むhtmlも準備します。
2
メッセージのリストをタイムライン風にデザインしてみたいと思います。

<!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

3
少し長くなったので続きは次回まとめます。

Add a Comment

メールアドレスが公開されることはありません。