コーディングを勉強し始めて、HTML/CSSも書き慣れてきた頃、お友達からCSS書くならsassとcompassを使ったほうがいいよ!とアドバイスをもらいました。 ということで実際に使ってみたのですが、CSSを書くのがホント便利になりました。というか書くのがより楽しくなりました。 今回は使ってみて幸せになったSassとcompassってどんな物かまとめてみました。

Sassとは?

Sass(Syntactically Awesome StyleSheets)、直訳すると構文的にすっごいスタイルシート。 つまりCSSをうまい感じに構造化して、より簡潔に表現することができる言語です。

Sass - Syntactically Awesome Stylesheets

compassとは?

sassを使ってCSSを便利に記述するためのフレームワークだそうです。つまり、Sassを書くときにもっと便利になると言うことです。 具体的に言うと、自動でベンダープレフィックスを書いてくれたり、リセットCSSを自動で準備してくれたりしてくれます。

Compass Home | Compass Documentation

どうやって使うの?

Sass/compassはscssファイルという物に書きこんでいきます。そしてscssファイルに書き込んだ内容をcssにコンパイル(書き換える)を行います。

そしてSass/compassを使うにはRubyが必要です。 Macを使ってる皆さんは最初から入っているので入れる必要はありません。 Winの方はまずはRubyのインストールが必要なようです。

詳しい導入方法などはこちらがわかりやすく参考になります。

CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG 

結局なにが何が便利なの?

そんないちいちファイルを変換とか、Rubyとかややこしい事して結局何が便利なのか? それは便利なコードの書き方がいっぱいあるところにあります。 Sass/compassを使うとこんなことができちゃいます。

入れ子

#contents{
    padding:10px;
}

#contents p{
    font-size:16px;
}

#contents p a{
    color:#ff0000;
}

例えばこのようなコードがあったとします。

これをSassの記法で書くと…

#contents{
    padding:10px;
    p{
        font-size:16px;
        a{
          color:#FF0000;
        }
    }
}

このように入れ子にして書くことが出来ます。 これだとパッと見でHTMLの入れ子関係も把握しやすいですよね。

変数

p{
    width:800px;
    color:#FF0000;
}

a:link{
    color:#FF0000;
}

例えばこのように同じ指定を何度もするとき変数は有効です。

これを変数を使ってSassの記法で書くと…

$mainWidth:800px;
$fontColor: #FF0000;

p{
    width:$mainWidth;
    color:$fontColor;
}

a:link{
    color:$fontColor;
}

$を先頭に書くと変数の宣言になります。 コードが短いとあんまり有効に見えないかも知れないですが、コードが多くなったときに何度も同じ内容をコピペする必要もなくなります。一番最初に変数を決めておくととても便利です。

compassのインポート

compassを使うにはインポートをする必要があります。これが便利。 どんなふうにインポートするかというとscssファイルの先頭に

@import "compass";

と書くだけです。これでcompassを使える状態になります。

この状態でにscssファイルこの様に書きこむと

p{
     @include border-radius(10px);
}

と書きこむと…

こんな風にcssファイルに書きだしてくれます。

p {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

ベンダープレフィックスが自動でついてます。これでわざわざベンダープレフィックスを書く手間が省けます。 他にもリセットCSSやクリアフィックスのコードを自動で書きだしてくれるインポートもあったりしてます。

他にも便利なことがいっぱい

簡単に説明しましたが、他にも演算や、条件分岐、mixinなど便利な記法がたくさんあります。 書くのがすごく楽しくなるので、CSSを覚えたらぜひ使ってみてください。

詳しい説明などはこちらのサイトを参考にしてみてください。

Sassを覚えよう - CSS HappyLife Compassの基礎 (全7回) - プログラミングならドットインストール