Compassを使って効率的にCSSを書こう!!

HTML&CSS

前回、Sassとは?というお話を書きました。
次はSassのインストールと使い方を書こうかと思いましたが、インストールの前に、Compassのご紹介。
CompassをインストールすればSassのインストールもできるので、Compassのご紹介をしてからインストールや使い方というお話をしようと思います。

ちなみに前回のSassのお話はコチラ。
https://web-memo.jp/sass/

Compassってなぁに??

Compassは、オープンソースで作られているCSSのフレームワークになります。
Sassのお話の際、ミックスインというものをご紹介しました。
このCompassを使えば、既に用意されているミックスインを使えたり、ベンダープレフィックスなど煩わしいCSSを簡単に書けるようになります。
なので、コードが少なく済み、見やすくメンテしやすいというメリットが得られます。
フレームワークというと少し導入や使えるようになるまでに時間がかかるのではと思いますが、そこまで難しいものでもなく、かなり便利になるのでぜひ導入したいフレームワークです!

Compassを使うには、
1.Compassをインストール
コマンドラインから『gem install compass』

2.プロジェクトの新規作成
コマンドラインから『compass create (プロジェクト名)』
※作業ディレクトリに移ってから!『cd ~』ってやつで参照ディレクトリを作業ディレクトリに移してからになります。

3.自動変換できるようにしておく
コマンドラインから『compass watch』

4.フレームワークを読み込む
scssファイルで『@import “compass”;』

という手順になります。
詳しい使い方は、次回図解を入れて導入から書いていきたいと思います。

Compassって何ができるの??

ひとことで言うと、CSSを簡単に作れます~という事になりますね。
先程少し挙げたものと、その他できる事を詳しく見ていきます。

ベンダープレフィックス等の複雑なCSSを簡単に書く事ができます

Compassで用意されているCSS3のミックスインを使えば、ベンダープレフィックス等面倒なCSSが、とても簡単でわかりやすいコードで済むようになります!

○.scssでの記述

@import "compass";
div{
    @include inline-block;
    @include box-shadow( 0 0 10px #ccc);
    @include opacity(.8);
}

○コンパイルで生成される.css

div{
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-box-shadow: 0 0 10px #ccc;
  -moz-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

とっても短いコードで済んでるのがわかりますね。
制作時もそうですが、変更等あった際の編集がとても効率的だと思います。

CSSスプライト画像を生成できます

小さな画像を1枚にまとめてポジションプロパティで表示させたいところだけを表示させる事で画像読み込みのリクエストを減らし、速度の向上とメンテナンス性の向上が行えるCSSスプライト。
ただ、画像を1枚に統合するのも、表示位置の調整も若干面倒ですよね。

Compassを使えば、なんとこの作業が楽々できちゃいます♪
それもCSSスプライト化したい画像を入れたフォルダーを作成して、指定するだけ!
1枚の画像を生成し、background-position・width・heightの指定まで作ってくれます。
例として、spriteというフォルダーを作り、以下のようなアイコンを入れたとします。
img/sns/fb.png
img/sns/tw.png
img/sns/gp.png
img/sns/hb.png

○.scssでの記述

@import "sns/*.png";
@include all-sns-sprites;

○コンパイルで生成される.css

.sns-sprite, .sns-fb, .sns-gp, .sns-hb, .sns-tw {
  background-image: url('/img/sns-s3a295def20.png');
  background-repeat: no-repeat;
}

.sns-fb {
  background-position: 0 0;
}

.sns-gp {
  background-position: 0 -30px;
}

.sns-hb {
  background-position: 0 -60px;
}

.sns-tw {
  background-position: 0 -90px;
}

Compassのデメリット

Sass同様、やはり導入にデメリットもあります。
メリットの方がだいぶ大きいですけどね♪

コマンドラインの使用が必要

コンパイルするのに多少コマンドラインを使ったりしますので、黒い画面に抵抗がある方はそれだけで使うのがイヤになるかも・・・
でも、そんなにたいした作業はしないので、チャレンジしてみてください!

管理するファイルが増える

Sassを導入する事でscssファイルが増えるし、Compassを導入する事でconfig.rbというCompassの設定ファイルが増えます。

デメリットもありますが、絶対にメリットの方が大きいですっ!
まだ使った事ないよって人はぜひご検討ください!
次回は、導入手順をご紹介したいと思います。

ブログランキングに参加しました!
応援宜しくお願いします!!

にほんブログ村 IT技術ブログへ
にほんブログ村

この記事を書いた人

うぇぶめも。運営者のたきおです。
ジョギング・草野球が趣味のクセにぽっちゃり体型。

自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。
気に入ってもらえればTwitter・Facebookなどでもフォローして頂けると励みになりますm(__)m

フォローしてくれると、うれしい。
HTML&CSS
フォローしてくれると、うれしい。
うぇぶめも。

コメント