whiskers
メニュー
blog

初めての Middleman シリーズ初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    前回の記事初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化でパーシャル機能を使って再利用可能なモジュールを作ることができました。今回はSCSSをコンパイルしてテンプレートフォーマットについて勉強してみます。

    とりあえずコンパイルしてみる

    何か設定が必要なのか迷ってしまいますが、何もいりません。config.rbをいじる必要もありません。

    SCSSファイルを作る

    sourceディレクトリにstyle.css.scssを作って簡単なSCSSを書いてみます。

    $color: #000;

body {
  background: $color;
}

    ビルド

    $ middleman buildを実行してみます。buildフォルダにstyle.cssができていれば成功です。

    /* line 3, /Users/nukos/Projects/example.com/source/style.css.scss */
body {
  background: #000; }

    つまり、どこであっても拡張子のルールに沿っていればコンパイルできるわけです。コンパイル対象を予め定義する必要がないのはTiltのおかげです。テンプレートとテンプレートエンジンのオプションは公式ドキュメントに詳しく紹介されています。

    これでSCSSをコンパイルする方法はわかりました。

    コンパイルしたCSSをHTMLに指定する

    CSSをHTMLに指定するには直接<link>タグを書いても良いですが、アセットヘルパーを使うのが便利です。アセットヘルパーについては公式ドキュメントのアセットヘルパで紹介されています。

    アセットヘルパーを使うには

    アセットヘルパーを使うには下準備が必要です。例えばCSSであればCSSファイルがどこのディレクトリにまとめられているのか予め定義しておく必要があります。この指定はconfig.rbに記述します。

    config.rb

    今回、CSSファイルをassets/cssにまとめたいので以下のように定義しておきます。

    set :css_dir, 'assets/css'

    common.css.scss

    実際にassets/cssディレクトリを作り、common.css.scssファイルを作っておきます。

    $color: #000;

body {
  background: $color;
}

    アセットヘルパーを使ってCSSを指定する

    アセットヘルパーを使ってレイアウトファイルにCSSを読み込ませます。アセットヘルパーにはファイル名の拡張子を抜いたものcommon.css.scssであればcommonを指定します。<%= stylesheet_link_tag "common" %>こんな感じです。これを<head>の中に指定します。

    layout.erb

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= current_page.data.title || "The Middleman" %></title>
  <%= stylesheet_link_tag "common" %>
</head>
<body>
  <%= partial('modules/header', :locals => { :description => 'hogehoge' })  %>
  <%= yield %>
</body>
</html>

    ビルド

    ビルドしてみます。

    $ middleman build
      update  build/assets/css/common.css
      update  build/index.html

    ビルドされたHTMLにコンパイルされたCSSのパスが指定されたタグが埋め込まれていれば成功です。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello World</title>
  <link href="/assets/css/common-d7f822e6.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <header>
  <h1>example.com</h1>
  <p>hogehoge</p>
</header>
  <p>Hello World</p>
</body>
</html>

    これでSCSSをコンパイルしてHTMLに読み込むことができるようになりました。

    SCSSコンパイル時のoutputstyleとlinecomments

    SCSSをコンパイルする際のoutput_styleとline_commentsを制御するにはconfig.rbにcompass_configを指定します。

    configure :build do

  compass_config do |config|
    config.output_style = :compressed
    config.line_comments = false
  end

end

    この指定で、$ middleman buildの時はoutputstyleを:compressedに、linecommentsをfalseにすることができます。

    Live Reload

    Live Reloadを有効にするにはconfig.rbに以下の指定を追加します。

    configure :development do
   activate :livereload
end

    その他のアセットヘルパー

    CSS以外にもJavaScriptや画像、リンク等のアセットヘルパーが用意されています。

    config.rb

    JavaScriptや画像もどこに置かれているかconfig.rbに定義しておきます。

    set :css_dir, 'assets/css'
set :js_dir, 'assets/js'
set :images_dir, 'assets/images'

    呼び出し方はCSSと同じです。ヘルパーにはパラメータを渡すことでclassやwidth等の属性値を指定できます。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= current_page.data.title || "The Middleman" %></title>
  <%= stylesheet_link_tag "common" %>
  <%= javascript_include_tag 'application' %>
</head>
<body>
  <div id="logo"><%= image_tag 'logo.png', :width => '100', :class => 'logo' %></div>
  <%= partial('modules/header', :locals => { :description => 'hogehoge' })  %>
  <%= yield %>
</body>
</html>

    これでサイトを作るために最低限必要な機能を覚えました。
    次回は一歩踏み込んでSCSSにbourbon, neatを導入してみたいと思います。

    次回：初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる

    シリーズ

    1. 初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman：サイトにブログ機能を追加する
    8. 初めてのMiddleman：Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman：設定について
    11. 初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman：Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman：スケルトンを自作する方法
    17. 初めてのMiddleman：Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman：Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman：Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman：Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman：多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

    関連記事

    Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

    • Wercker, Amazon S3, Middleman 3

    ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

    • AngularJS 1, Bootstrap 3, Middleman 3

    初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

    • Middleman 3

    ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

    • AngularJS 1, Middleman 3

    初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

    • Middleman 3

    コメント・フィードバック