Go to Qiita Advent Calendar 2024 Top
LoginSignup
33
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@soyanchu

CompassでCSSコーディングを時間短縮しよう！Railsでの具体例付！

Posted at

はじめに

Sassはみなさん使っていると思いますが、同じくらい有名なCompassはみなさんお使いでしょうか。今まで私が参画しているプロジェクトだとCompassを使わず自前でMixinを書いていましたが、リニューアルの際に導入しようと思い書こうと思った次第です。

前提

  • Railsで使う想定
  • Compass自体の説明をしています(Rails以外での環境構築については書いておりません)

目的

  • Compassのメリットを把握するため
  • Compassいいじゃん！って思ってもらうため
  • Compassでできることを知って実際のプロジェクトで使われそうなMixinをまとめておくため
  • RailsでCompassを導入するにあたって注意することを書いておくため

Compassは何が便利なのか

メリットとしては、

  1. 再利用可能なコードがたくさん
  2. かゆいところに手が届くmixin
  3. スプライトが簡単に作れる！

などがあります。

Compassってどうやって使うの？

Railsだったら、

gem "compass-rails"

を入れるだけ！

ちなみに、

uninitialized constant Sprockets::SassCacheStore

が出たらSass, Compass, sprocketsなどのバージョンの問題が関わってると思います。僕はここでしばらくハマりました。
この記事とか参考になりました！
僕が今回作ったサンプルのGemfileも迷ったら参照してみてください！

Compassのモジュール5つ

Compassの真髄であるモジュールについて見ていきます。
Compassでは全部で5つのモジュールに分類されています。

CSS3

CSS3のモジュール。ベンダープレフィックス付きのコードが出力されるので、Sassにいちいちmixinで書かなくてOKに。これが一番使う

Typography

テキストのモジュール。テキストカラーや行間とかはいってる。

Utilities

一般的なパターンのモジュール。clearfixとか。

Layout

レイアウト系のモジュール。

Reset

リセットCSSのモジュール。これも読み込んでおけばわざわざ新しいファイル作成する必要がなくなりますね。

具体的にモジュールを見ていきます

CSS3モジュール

box-shadowはクロスブラウザ対応を考えると-webkitのベンダープレフィックスをつけないといけなくて面倒ですよね。他にもtransitionとかtransformなどいちいちmixinに書いていたもののいちいちググってたのでだるかったです。

そんなあなたに！

@include box-shadow(); // Sassなら +box-shadow()

とやるだけでベンダープレフィックスが付与されます。
他にもFlex, box-sizingなど色々あるので便利ですね。
詳しくは公式を参照してみてください！

Typographyモジュール

これも数は少ないですが痒いところに手が届く便利なものがありますね。
具体例を見て行きましょう。

// hover, focus時に下線をつけてくれます！
@include hover-link; 

// normal, hover, active, visited, focusの順に色をまとめて指定できます。最低引数は1つ以上です。
@include link-colors("black", "red", "blue", "yellow", "purple");

// 普通の文章のカラーリングと同じにしてくれます。※ 内部的には color: inherit, text-decoration: inheritなどを行っています。
@include unstyled-link;

どれも便利！実際のmixinが見たい人は公式を参照してみてください！

Utilitiesモジュール

clearfix, floatなどの便利モジュールやIE対応が考慮されたmin-width, min-heightのコードが入っています。

他にも、

@include inline-list;

ってやると、横並びにしてくれたり、

@include pretty-bullets("arrow.png");

ってやると、左側にアイコンをつけてくたり、
そこまでしてくれるのか、、って感じのモジュールが詰まっています。
これをどこまで使うかはルールを決めたほうがいいかなという印象を受けました。
他にも色いろあるのでこれも詳しくは公式を！

Layoutモジュール

gridを背景に敷いてくれたり、スティッキーフッターがあったりっていう感じみたいです。他に比べてあんまり魅力的でない印象。。
これも公式を詳細は見ていただければと。

resetモジュール

@import "compass/reset"

で、reset CSSを出力してくれます。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

シンプルでいいですね。reset CSSは毎回どれにしようかな〜って悩んでたところがあったので今後はこれを使いたいなと思いました。

railsでCompassをどこで読み込ませるか

Compassの問題というよりはCSS全体の問題になりますが、二通りのアプローチがあるかなと思っています。(他にいい方法あったら教えて下さい・・・)

  1. controllerを作った時に自動生成されるsassファイルの先頭に@import "compass"をする

  2. 自動生成されるファイルは使わずに独自でファイル、ディレクトリを作成してapplication.sassに全てを@importさせる

大体この2つかなと思ってて、
1は

tests.css.sass
@import "compass"
@import "mixin" // 独自で作成したmixinを読み込ませるファイル

.test
	border: 1px solid red

みたいに書いていくやり方ですね。
これは毎回先頭でimportさせないといけないという点でちょっとめんどくさいですね。なお既存のプロジェクトだとこのやり方でやっています。

2はソースで言うとこんな感じです。


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */

@import "compass"

// reset
@import "compass/reset"

// layout
@import "layout/layout"

// module
@import "module/box"

思想としては、SMMACCSを取り入れてる感じです。これだと大枠のファイルで一度記述しておけばよくなるので楽かな、といった印象です。

実際にサンプルでCompassのプロジェクトを作ってみましたが、今回はSMACCSを採用する前提で2を採用してみました。

まとめ

  • Compassで最低限のモジュールをimportした後に、追記でmixinに記述していけば、mixinファイルをシンプルにすることができます。
  • かゆいところに手がとどくモジュールのおかげで、毎回似たようなコード書いてるな・・というのがだいぶなくなると思います。

Compassを使って楽をする所は楽をしてCSS設計や複雑なレイアウトのコーディングなどクリエイティブなところに時間を使えるようにしましょう！

参考

書籍で今回書いたことがより詳しく書いてあるので興味ある方は是非読んでみることをオススメします。

  • 公式
    迷ったら公式を読めば全てのっています。
33
36
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
33
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?