compassでよく使うコマンド(主にCSS3関係)の整理

電脳備忘録

最近は友人に教えてもらった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;

参照先はマニュアルも含め英語サイトが多いのでアレですが、演算とか条件分岐とか色々出来るようなので、使いながら学習したいと思います。

広告

ブログの維持費に充てるでございます・・・。