ゴトー
Sassの@extendでclearfixを使いまわす
CSSで多用される、レイヤー内でのfloat解除するためのclearfixですが、通常だと下記のようにレイヤーごとにclearfixクラスを付与させるケースが多いと思います。 <div class="bo…Sassを使ってCSSクラスをバージョン分けする
HTMLには手を入れずCSSだけでデザイン変更を行う場合、対象のCSSクラスを編集することになりますが、Sassで記述することで作業効率が上がるのでその方法を紹介します。 たとえば既存のCSSを下記とします。 .navi…Compass(Sass)で特定種類の要素を一括スタイル指定する
Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。 Sass記述 #{elements-of-t…Compass(Sass)で見出しタグを一括スタイル指定する
Compassにはh1～h6の見出し用タグを一括して処理する関数があります。 Sass記述 #{headings()} { display: inline-block; } #{headings(4)} { //h1から…CSSとFontAwesomeだけでチェックボックス・ラジオボタンをデザインする
表示サンプルはこちらhttp://jsdo.it/goto_jp/o1XT OSやブラウザ、PC/スマホで何かと表示に差異があり扱いの面倒なチェックボックス・ラジオボタンをWebFontのメジャーどころ「FontAwes…Compass(sass)でリセットCSSを楽に書く
ブラウザ標準のスタイルをリセットするためのCSSをCompassで一発で出力することができます。 Sass記述 1行書くだけです。 @include global-reset; 出力CSS 下記CSSがドバッと出力され一…CSS3の新プロパティ「columns」
名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 10…