blog

初めての Middleman シリーズ初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる

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

    前回の記事初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎でSCSSのコンパイル方法とアセットヘルパーを使ったHTMLへの埋め込み、テンプレートの基礎について覚えました。今回はSassのMixinライブラリであるBourbonNeatを導入してみます。

    MixinライブラリといえばMiddlemanにはCompassがプリインされてるのでBourbonを使うかどうかは好みです。

    Bourbon, Neatのインストール

    まずはgemを使ってBoutbon, Neatをインストールします。

    Gemfile

    GemfileにBourbon, Neatを追記します。

    source "https://rubygems.org"
    
    gem 'middleman'
    gem 'middleman-livereload'
    
    gem 'bourbon'
    gem 'neat'
    

    インストール

    追記後にあらためてインストールを実行します。

    $ bundle install
    Fetching gem metadata from https://rubygems.org/.........
    Fetching additional metadata from https://rubygems.org/..
    Resolving dependencies...
    Using i18n 0.6.11
    Using json 1.8.2
    Using minitest 5.5.1
    Using thread_safe 0.3.4
    Using tzinfo 1.2.2
    Using activesupport 4.1.9
    Using sass 3.4.11
    Using thor 0.19.1
    Installing bourbon 4.1.1
    Using bundler 1.7.6
    Using hitimes 1.2.2
    Using timers 4.0.1
    Using celluloid 0.16.0
    Using chunky_png 1.3.3
    Using coffee-script-source 1.9.0
    Using execjs 2.2.2
    Using coffee-script 2.3.0
    Using multi_json 1.10.1
    Using compass-core 1.0.3
    Using compass-import-once 1.0.5
    Using rb-fsevent 0.9.4
    Using ffi 1.9.6
    Using rb-inotify 0.9.5
    Using compass 1.0.3
    Using eventmachine 1.0.4
    Using http_parser.rb 0.6.0
    Using em-websocket 0.5.1
    Using erubis 2.7.0
    Using tilt 1.4.1
    Using haml 4.0.6
    Using hike 1.2.3
    Using uber 0.0.13
    Using hooks 0.4.0
    Using kramdown 1.5.0
    Using listen 2.8.5
    Using padrino-support 0.12.4
    Using padrino-helpers 0.12.4
    Using rack 1.6.0
    Using rack-test 0.6.3
    Using middleman-core 3.3.7
    Using sprockets 2.12.3
    Using sprockets-helpers 1.1.0
    Using sprockets-sass 1.3.1
    Using middleman-sprockets 3.4.1
    Using uglifier 2.7.0
    Using middleman 3.3.7
    Using rack-livereload 0.3.15
    Using middleman-livereload 3.4.2
    Installing neat 1.7.1
    Your bundle is complete!
    It was installed into ./vendor/bundle
    

    これでインストールは完了です。

    SCSSにBourbon, Neatを読み込む

    前回作成したcommon.css.scssにBourbonとNeatをimportします。Bourbonが動いていることを確認するためにBourbonのMixinを使って<body>の背景をグラデーションさせてみます。

    @import 'bourbon';
    @import 'neat';
    
    body {
      @include background(linear-gradient(red, green) left repeat);
    }
    

    ビルド

    $ middleman buildでビルドします。コンパイルされたCSSが以下のようになっていればBourbonとNeatを正しく導入できています。

    /* line 4, /Users/nukos/Projects/example.com/vendor/bundle/ruby/2.1.0/gems/neat-1.7.1/app/assets/stylesheets/grid/_box-sizing.scss */
    html {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    
    /* line 9, /Users/nukos/Projects/example.com/vendor/bundle/ruby/2.1.0/gems/neat-1.7.1/app/assets/stylesheets/grid/_box-sizing.scss */
    *, *:before, *:after {
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
      box-sizing: inherit; }
    
    /* line 4, /Users/nukos/Projects/example.com/source/assets/css/common.css.scss */
    body {
      background: -webkit-linear-gradient(red, green) left repeat;
      background: linear-gradient(red, green) left repeat; }
    

    これでBourbon, Neatが使えるようになりました。
    次回はデータファイルと動的ページ生成について勉強します。

    次回:初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成

    シリーズ

    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で管理されているフォントファイルをインポートする

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