Column
コラム

あるところでは

CSSを書く上でLESSやらSassやらと、WEB制作を楽にするための言語というのでしょうか。記述が簡単にできるものがあります。

とかって書いてあるところも見つけましたが、筆者はLESSをガッツリ使っていないのでわかりません。 Sassのがフィーリングがあった。相性がよかったってところでした。

さて、Sassを使う上で絶対に外せないものがあります。 そう、Compassです。

Compassとは

Compassは、Sassのオープンソースフレームワークです。
ベンダープレフィックスだったり、スプライトを作成してみたりとできることはたくさんあります。

Sass、Compassを使うために

Sassを使うためにはコンパイルをする必要があります。
どうやって、SassをCSSにするかというと、２パターンですね。
GUIのアプリを使って変換、もしくはローカル環境にて[Ruby][Sass][Compass]をインストールしてコンパイルすることになります。

$ sudo yum install ruby
$ sudo gem install sass
$ sudo gem install compass

$ mkdir project
$ cd project
$ compass create

├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

$ compass w

$ compass watch

Compassを使ってみる

ここから、本題です。
では、Compassを使っていきます。
Compassを使うには、インポートしちゃいます。

@import "compass";

Compassには個別にモジュールがあります。
上記は、その個別のモジュール関係なしに一括でインポートしちゃった例です。
個別にインポートする場合は

@import "compass/css3", "compass/typography";

こんなかんじで呼び出して下さい。
複数呼び出す場合は、(,)カンマ区切りでOKです。

それでは、ひとまずCompassを使った記述例を書いてみます。

@import "compass";
$default-border-radius: 10px;

body *{
  @include box-sizing(border-box);
}

.wrapper{
  width: 1100px;
  margin: 0 auto;
  .maincolume{
    width: 700px;
    float: left;
    background-color: #ddd;
    .container{
      @include border-radius;
      background-color: #fff;
      border:1px solid #ccc;
    }
  }
  .sidecolumn{
    width: 350px;
    float: right;
  }
}

body * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  width: 1100px;
  margin: 0 auto;
}
.wrapper .maincolume {
  width: 700px;
  float: left;
  background-color: #ddd;
}
.wrapper .maincolume .container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.wrapper .sidecolumn {
  width: 350px;
  float: right;
}

見ていただければなんとなくわかるかもしれませんが、 @include から始まっている行があると思います。
そこのコンパイルされた部分を比較してみると

// コンパイル前
body *{
  @include box-sizing(border-box);
}

// コンパイル後
body * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// コンパイル前
.container{
  @include border-radius;
}

// コンパイル後
.container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

ベンダープレフィックスが付いているのがわかるでしょうか。
これによりクロスブラウザの対応が可能になります。

ブラウザーサポートの変数一覧

この設定を変更することによって、ベンダープレフィックスの出力設定が変更されます。
下記はその一例です。

// SVG指定も出力するように(IE9用)
$experimental-support-for-svg: true;

// 色を登録しておくよ
$topColor: #000;
$bottomColor: lighten($topColor, 20%);

#breadcrumb{
  clear: both;
  background: $topColor;
  @include background-image(linear-gradient(top, $topColor, $bottomColor));
  @include filter-gradient($topColor, $bottomColor, vertical);
}

breadcrumb{
  clear:both;
  background: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==) #000;
  background-size:100%;
  background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#000),color-stop(100%,#333));
  background-image:-webkit-linear-gradient(top,#000,#333);
  background-image:linear-gradient(to bottom,#000,#333);
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,tartColorstr='#FF000000',endColorstr='#FF333333');
  overflow:hidden
}

いかがですか？
CSS3でのgradationの記述をIE9用にSVGをバッググラウンドとして、書きだされております。
こういったように、各ブラウザに対応できるようになります。

confing.rb
images_dir = "images"

├─ config.rb
├─ sass
│   └── style.scss
└─ images
    ├─ **.gif
    ├─ **.png
    ├─ **.jpg
    └─ sprite
        └── ***.png

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

チートシート

これまでに説明した部分以外にもいっぱいCompassでらくできることがいっぱいあります。
CSSわかる方ならこちらを見るだけでもわかるかもしれませんね。
ではどーんといってみよう！！

  @include border-radius(10px);
  @include box-shadow(red 2px 2px 10px);
  @include inline-block;
  @include opacity(0.5);
  @include single-text-shadow;
  @include transition-property(width);
  @include transition-duration(2s);

  @include link-colors(red, blue, black, white, white);
  @include nowrap;
  @include force-wrap;

  background:image-url(hoge) no-repeat 0 0;
  @include clearfix;
  
  @include ellipsis;
  @include horizontal-list;
  
  @include replace-text;
  
  // Vertical Rhythm
  $base-font-size: 16px;
  $base-line-height: 24px;
  @include establish-baseline;
  @include adjust-font-size-to(16px, 2);
  
  // Placeholder
  #{elements-of-type(text-input)} {
    @include input-placeholder {
      color: #bfbfbf;
    }
  }

まとめ

Sass使うならCompassを使わないなんて考えられない！
ということのほんの一部でも、なんとなくでもいいので、少しは分かっていただけたら、すごく嬉しいです。
SassとCompassについては、ネット上にはたくさんの情報や、ライブラリがあります。
あれ？この作業めんどうだなぁ。って思った時は、探してみるとだいたい見つかるのではないでしょうか。
どんどん、自分で使いやすいようにライブラリなどいっぱい使って作業効率をあげて、余った時間をスキルアップや、趣味の時間にあてて楽しんでいきましょう