[Middleman 3][SCSS]初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる

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

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

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：データファイルとデータファイルを使った動的ページ生成