Compassを使ってSassを綺麗に書く方法（具体的なコード付き・railsでの使用方法も記載） #Rails

前提

Sass自体はCSSをより美しくかけることで有名なので、皆さん使っていることだと思います。そして、それをより無駄なくかくことができる方法にCompassを使った書き方があります。今回は、Compassを使用したSassの書き方をまとめようと思います。

流れ

Sass振り返り
Compassとは
RailsにおけるCompassの導入方法
Compassのmodule

Sass振り返り

Sassとは

CSSのメタ言語
拡張子は、.scssと.sassがある。

CSSとSassのコードの違い

index.css

.hoge {
  font-size: 10px;
  color: white;
}

index.sass

.hoge
  font-size: 10px
  color: white

CSSやSCSSでは、{ }を使用することが必須でしたが、Sassを使うことで、この{ }を外し、インデントの深さで表現します。ここだけみると、Slimの書き方とよく似ていますよね。

RailsでSassを使用するには?

gem 'sass-rails'

Gemfileに上記のようなgemを追加して、bundle installをしてください。その後、Sassを利用することができるようになります！まだ、使用していない方は、ぜひ導入してみてください。

Sassでできること

変数
mixin
extend

変数

$main_color: #fff

h1 
  background-color: $main_color

mixin

引数を渡すことで、返り値をcssに当てる方法。
@mixin 命名（引数）で定義し、
使うときは@include mixinの名前（引数）で呼び出してあげる。

@mixin border($color: #555)
  border-bottom: 1px solid $color


h1 
  @include border(#777)

extend

一度定義したスタイルの継承。

.hoge 
  margin-bottom: 10px
  color: #fff

.fuga
  @extend .hoge

mixinとextendの違い

mixin

何度も使用するものは定義して使用する
引数が使える
呼び出すときは、@include mixin名;

extend

一度どこかで定義したものを継承して使う。
呼び出すときは@extend セレクタ名;

Compassとは

Sassをもとに開発されたフレームワーク
再利用可能なコードが豊富
スプライトが簡単に作れる

RailsにおけるCompassの導入方法

gem 'compass-rails'

Gemfileに上記のgemを追加してbundle installするだけ！

Compassのmodule

CSS3
Typography
Utilities
Layout
Reset

上記の5つが大きな分類として含まれています。そして、それぞれの中に複数のmoduleが含まれているので、これらのmoduleの中身を確認して、自分でmixinを作るのではなく、Compassの恩恵を受けましょう。

CSS3

.hoge 
  @include border-radius

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

これはcss3モジュールの中の1つで、角丸をつくるためのものです。
sassで@includeしてくるだけで、簡単に角丸をつくることができます。
このほかのmoduleは以下のURLにまとまっているので、興味ある方はご確認ください。
参照: http://linkerdesign.github.io/journal/2011/07/compasscss3.html

Typography

.hoge 
   @include link-colors(white,white,white,white,white)

.hoge {
  color: white;
}
.hoge:visited {
  color: white;
}
.hoge:hover {
  color: white;
}
.hoge:active {
  color: white;
}

テキストカラーや行間などのテキスト系mixinが含まれています。
ほかにどんなmixinがあるのか気になる方は以下のURLをご確認ください。
参照: http://www.webdesignleaves.com/wp/htmlcss/675/

Utilities

.hoge 
  @include clearfix

.hoge {
   overflow: hidden;
  *zoom: 1;
}

clearfixなどのmixinが含まれています。
ほかにどんなmixinがあるのか気になる方は以下のURLをご確認ください。
参照: http://www.webdesignleaves.com/wp/htmlcss/675/

Layout

グリッド線やレイアウトなどのレイアウト用のmixinが含まれています。

Reset

リセットcssのmodule

Compass moduleの使い方

@import 'compass/css3'
@import 'compass/typography'
@import 'compass/utilites'
@import 'compass/layout'
@import 'compass/reset'

このように@importで呼び出すことができます。