初めてSassとCompassを使った際に参考にした記事まとめ

しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。

順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。

Sassとは

まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。

Sassの公式サイトは以下から。

Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。

Compassのドキュメントは以下から確認できます。

そして、こちらからが私が導入するのに参考にしたサイトです。こちらを見れば導入の仕方から基本的な使い方までわかるかと思います。

基本的な使い方を覚えたら、さらに便利な使い方を覚えましょう。いろいろな機能･使い方があります。

出力されたCSSが、自分の記述方法と違うと嫌ですよね。また案件で使うとなるとルールがある場合もあります。
その時はこちらの記事を参考に出力される記述方法を変更しましょう。

CSS　Spriteの使い方はこちらを参考にしました。自動で画像を合成して、位置も自動でCSSに記述してくれます。

画像を合わせて位置を合わせてが大変だったので、これは嬉しい機能です。

Compassの設定「config.rb」というRubyのファイルです。そこに記述する初期設定のことがいろいろ載っています。

私はSpriteした画像の読み込むパスがルートになってしまって、ローカル環境で確認できなかったので「relative_assets」を設定して相対パスにしました。

環境を整えるのが少し面倒ですが、整えてしまえばCSSを書くのが楽しくなります。

いろいろ機能を使って便利にCSSを書いて行きたいです。