Help us understand the problem. What is going on with this article?

CSSが超絶便利になる!Compassについてまとめてみた

More than 5 years have passed since last update.

Compassってなに?

Sassをもとに書かれたフレームワーク。
以下の特徴があります。

  • ソースが綺麗になる
  • Webでよく使われる項目がたくさんある
  • CSSスプライトが超絶簡単にできる
  • CSS3が簡単に使える
  • 拡張も簡単

インストール

terminalから compass っていう gem をインストールするだけ。

gem update --system
gem install compass

どうやって使うの?

1, Compassプロジェクトの作成

任意のフォルダに移動してcompassのprojectを作成する。

compass create project名

今回は compass-test ってproject作るんなら↓

compass create compass-test

すると以下の様なフォルダ・ファイルが生成される。
スクリーンショット 2014-03-27 9.01.12.png

2, config.rbの設定

config.rbの中身はこんな感じ↓
インラインで説明書いてます。

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"                 #HTTPパス
css_dir = "stylesheets"         #cssが書き出されるディレクトリ名
sass_dir = "sass"               #sass(scss)ファイルがあるディレクトリ名
images_dir = "images"           #画像を置くディレクトリ名
javascripts_dir = "javascripts" #javascriptを置くディレクトリ名

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded        #CSSへの書き出しスタイル

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

output_styleに関してはあとで追記。

使ってみよう!

sass ディレクトリに application.scss ファイルを作成。
まあ名前は別に他の名前でもいいけど。

次に、terminalで先ほど作成したディレクトリに移動してから、
compass watch コマンドを実行。

cd compass-test
compass watch

compass watch しておくことで、
sass ディレクトリで保存したものが
stylesheets ディレクトリにリアルタイムに書きだされる。

次に、 appication.scss を開いて、
1行目に以下のように記述するとcompassが使える。

application.scss
@import 'compass';

これでcompassが使えるようになったぜ!
保存すると、
stylesheets ディレクトリに
application.css が書き出される。
あああ.png
わーい、できた!
sass ディレクトリで作ったものが stylesheets ディレクトリに書きだされる。
config.rb で設定したとおりですね。

このままだと application.css には何も記述されていないので、
取り敢えずなんか適当に書いてみよう。

application.scss
@import 'compass';

.radius {
  @include border-radius;
}

すると

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

ベンダープレフィックスまで全部書き出されてる〜♪
超便利!そう、これが compass です!

何ができる?

1, CSS3がめっちゃ簡単に書ける

CSS3ってさ、基本はベンダープレフィックス書かないとダメじゃん?
あれってめっちゃめんどくさい。。。
どのCSS3がプレフィックスが必要なのかも覚えてないし、
そうなると都度都度調べたりしてコピペしてまた忘れてまた調べてコピペして。。。
でもcompassさん、全部やってくれる〜♪

以下、よく使う項目だけまとめてみました。

application.scss
.great-compass {
    @include border-radius(3px);
    @include box-shadow;
    @include box-sizing(border-box);
    @include opacity(.8);
    @include text-shadow;
    @include transform(scale(30,20));
    @include transition;
}
application.css
.great-compass {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;

  -webkit-box-shadow: 0px 0px 5px #333333;
  -moz-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;

  text-shadow: 0px 0px 1px #aaaaaa;

  -webkit-transform: scale(30, 20);
  -moz-transform: scale(30, 20);
  -ms-transform: scale(30, 20);
  -o-transform: scale(30, 20);
  transform: scale(30, 20);

  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

他にもいろいろある。こちらを参照のこと。

2, CSSSpriteがめっちゃ簡単にできる

CSSSpriteってわざわざフォトショとかで加工してとかやってませんか?
ちなみに俺はやってますorz
でーもー、compass使うとめっちゃ簡単。

まず、プロジェクトの sass ディレクトリと同じ階層に images ディレクトリを作成し、
またその下にまとめたい画像の名前(例えばicon)とかでディレクトリを作成。
使う画像をその中にぶち込みます。
スクリーンショット 2014-03-27 13.28.10.png

んでもって、 application.scss に以下を記述するとスプライトできる。

application.scss
@import 'icon/*.png';
@include all-icon-sprites;
application.css
.icon-sprite, .icon-iconmonstr-archive-icon-256, .icon-iconmonstr-male-icon-256, .icon-iconmonstr-pdf-file-icon-256, .icon-iconmonstr-script-icon-256 {
  background: url('../images/icon-s88f6a42c38.png') no-repeat;
}

.icon-iconmonstr-archive-icon-256 {
  background-position: 0 -512px;
}

.icon-iconmonstr-male-icon-256 {
  background-position: 0 -256px;
}

.icon-iconmonstr-pdf-file-icon-256 {
  background-position: 0 -768px;
}

.icon-iconmonstr-script-icon-256 {
  background-position: 0 0;
}

スプライト画像も書き出されている。
スクリーンショット 2014-03-27 13.38.02.png

いろんな細かい設定もできるんですが、今回は省きます。
チュートリアル見てみてください。

3, より便利な機能

reset

reset cssが用意されている。
俺はresetあんまり好きじゃないから使わないが。。。

application.scss
@include 'compass/reset';
application.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, menu, nav, section, summary {
  display: block;
}

link-colors

application.scss
a {
    @include link-colors(blue, red, pink);
}
application.css
a {
  color: blue;
}
a:hover {
  color: red;
}
a:active {
  color: pink;
}

horizontal-list

application.scss
ul {
    @include horizontal-list(5px 10px);
}
application.css
ul {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 5px 10px;
  padding-right: 5px 10px;
}
ul li:first-child, ul li.first {
  padding-left: 0;
}
ul li:last-child {
  padding-right: 0;
}
ul li.last {
  padding-right: 0;
}

clearfix

application.scss
div {
    @include clearfix;
}
application.css
div {
  overflow: hidden;
  *zoom: 1;
}

inline-block

application.scss
div {
    @include inline-block;
}
application.css
div {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

ellipsis

application.scss
div {
    @include ellipsis;
}
application.css
div {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

replace-text

application.scss
div {
    @include replace-text('/icon/iconmonstr-archive-icon-256.png');
}
application.css
div {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url(/icon/iconmonstr-archive-icon-256.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

その他、結構あります。
リファレンス見てみてください。

masamitsu-konya
転職サイトGreenとTalentBaseのWebデザイナー&フロントエンドエンジニア。 バックエンドもマスターしたれぃ、と勉強中。
http://www.green-japan.com
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away