sass×compassでコーディング効率化!僕がよく使う自作mixin ※デモ付き

2015.5.21 CSS

今回は、僕がコーディングするときにたまに使う自作ミックスインを紹介します。

マウスオーバー時のリンクテキストカラーの変化とかはcompassですでに定義されているので、無理に自作するよりはそちらを参考にするのが得策かと思います!

なのでこのページに掲載されているのは「結構使い時に困るもの」ばかりかと思いますが…
ミックスインのつくりかたの参考程度に見ていただけると少しはお役に立てると思います^^

Webデザイナーにおすすめ?僕がよく使う自作mixin

それでは以下に綴っていきます。デモページヘのリンクも張っておいたのでぜひご覧ください!
ブラウザチェックは深くしていないので動作に関しては保証しません。

なお、ここにあるソースは改変商用利用に関して一切問わないのでご自由に!改変したよ!という場合はアドバイスをいただけると喜びます。

アンダーライン(下線)を引く

HTML

Sass

Css

デモ

未対応ブラウザへの対策として、IEの古いバージョンである場合に.ieというクラスを付与されると仮定した記述があります。

文字を縁どりする

HTML

Sass

Css

デモ

グラデーション

HTML

Sass

Css

デモ

フラットデザインのWebサイトの見出しで使える、折り返し付きのリボン

HTML

Sass

Css

デモ

彫り込まれたっぽい立体感のあるボーダー

HTML

Sass

Css

デモ

sassだからこそできる!ロングシャドウ

HTML

Sass

Css

デモ

正直、ほとんど使わないです。

見出しとかメインヴィジュアルのキャッチコピーとかサイトロゴにWebフォントと併せて使える程度でしょうか?

画像のキャプションやコメントシステムに使える、「吹き出し」

HTML

Sass

Css

デモ

リスト表示でテキストの前にアイコン画像をつかう

HTML

Sass

Css

デモ

画像へのパスは適宜変更してください!

mixinの引数$positionをabsoluteに、$centeringをtrueにすると、要素縦位置中央にアイコンを表示できます。

アイコンフォント(fontawesome)を要素の前に配置する

HTML

Sass

Css

デモ

こちらも同様に、アイコンフォント未対応ブラウザに対し、コンディショナルコメントでbodyタグとかに.ieというクラスが付与された場合の表示を考慮しています。アイコンフォントの代わりに「>」を表示します。

IE9.jsでは、IE8でアイコンフォントをサポートしてくれないため、残念ですね…

box-shadowで、紙がめくれたような自然な影をつける

HTML

Sass

Css

デモ

これは正直な話、気に入っているだけで使いどころは少ないです。

擬似要素で矩形をつくり、それにbox-shadowを使ってrotateで回転させ、要素の下にもぐりこませて、ぼかしの部分をチラ見せすることで紙がペロッとめくれているような表現をします。
影が解りづらい場合はmixinの$shadowColorの値を調節しましょう!ほかの値は基本的にそんなに変えなくても良いと思います。

これは「[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス」を参考にしています!

押した感覚がある、フラットデザインのボタン

HTML

Sass

Css

デモ

子要素をもつタグに指定してください(デフォルトでは、aを直接の子要素として持つものとしてあります)。
マウスオーバーやフォーカス、アクティブ状態のときにボタンを押したような動きをするフラットデザインのボタンが実装できます。

ほか、引数でボタンの高さ、背景色、角丸などの調節できます!

これも使いどきが難しいのですが、たまに使います。

includeしている@gradatioin-top-lightenは、「ズルいデザイン(2):SassやCompassを使って、ズルいデザインテクニック (1/2) – @IT」を参考にさせていただきました!

 

以上です。

省略可能なようにしてあるのですが、いかんせん引数の数が多いですね。

用途を絞って、それぞれの役割をはっきりとすることで解りやすいmixinになります!

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。