Rails4でcolor-me-sassを使ってカラー指定を便利にする #Rails

概要

color-me-sassはSass用のカラーライブラリです。

#7A991Fみたいな16進数カラーコードの代わりに$limeDarkなど、色の名前で指定できるようになります。

body {
  background: $limeDark;
}

いい感じのカラーがたくさん定義されていて便利そうなので、Rails4のプロジェクトで使ってみました。

bower-railsの準備

color-me-sassを普通にbowerでインストールしてもいいのですが、試しにbower-railsを使ってみました。

Gemfileを編集してgroup :development, :testのところにbower-railsを追加します。

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  # Bower support for Rails projects.
  gem 'bower-rails', "~> 0.10.0"
end

gemを追加、

$ bundle install

bower-railsでインストールしたコンポーネントはvendor/assets/bower_components配下に保存されるので、assetsのパスに登録しておきます。

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

color-me-sassを追加

プロジェクト直下のBowerfileに下の行を追加します。

# Colour library for the css preprocessor SASS
asset 'color-me-sass'

rakeコマンドを実行してインストール

$ rake bower:install

Sassで使ってみる

scssファイルを編集します。

@import "color-me-sass/_color-me-sass.scss";

body {
  background: $limeDark;
}

Sassのlighten()やdarken()を組み合わせると明度を調節することもできます。

// lighten()で明るくする
body{
  background: lighten($limeDark, 30%);
}

// darken()で暗くする
body{
  background: darken($limeDark, 30%);
}