最近は友人に教えてもらったcompassでCSSを書いています。まだ全然使いこなせていませんがcssでは出来ないようなことも出来るので楽です。特にCSS3の記述が1行ですむのがいいです。ということで、よく使うコマンドを自分向けに整理しておこうと思います。
お約束
参照は自己責任でお願いします。
compass各機能のインポート。使い始める前に、まずは使いたい機能をインポートしておく必要があります。ざっくりでもいいですし、細かく指定することも出来るようです。私はざっくり指定しました。
@import "compass/css3/"; //CSS3のmixinをインポート
@import "compass/reset/"; //リセットCSSをインポート
@import "compass/utilities/general/clearfix"; //クリアフィックスのmixinをインポート
aタグの設定。詳細はマニュアル(英語)を参照のこと。 各要素の色指定が1行で書けます。便利ですね。
//link-colors($normal, $hover, $active, $visited, $focus)
@include link-colors(#524e4d, #afafb0, #455765, #7b7c7d, #cc0);
グラデーションの設定。詳細はマニュアル(英語)を参照のこと。
@include radial-gradient(color-stops(#fff, #eee), top);
角丸の設定。詳細はマニュアル(英語)を参照のこと。
@include border-radius(5px);
ボックスシャドウの設定。詳細はマニュアル(英語)を参照のこと。
@include box-shadow(#9fa0a0 3px 3px 5px);
テキストシャドウの設定。詳細はマニュアル(英語)を参照のこと。
$default-text-shadow-color: rgba(43,43,43,.6);
$default-text-shadow-blur: 4px;
$default-text-shadow-v-offset: 2px;
@include single-text-shadow;
参照先はマニュアルも含め英語サイトが多いのでアレですが、演算とか条件分岐とか色々出来るようなので、使いながら学習したいと思います。