[DEMO] Compassを使用した便利なextend＆mixin

LIG BLOG記事に戻る

動作環境は、モダンブラウザ＆IE8（radius系はIE9）です。

省略可能な変数については破線表示しています。
省略した場合はmixinの()で定義されている値がデフォルト値として採用されます。

extend     

%clearfix

@extend %clearfix;
よく使うのでまとめてしまいましょう。

%ellipsis

@extend %ellipsis;

テキストを途中で切って「...」を表示するellipsisは、extendにしておくと便利。なんだかんだで結構使いますよね。これでいつでもどこでも使い回し放題です。テキストを途中で切って「...」を表示するellipsisは、extendにしておくと便利。なんだかんだで結構使いますよね。これでいつでもどこでも使い回し放題です。

%hidetext

@extend %hidetext;
画像置換の際に毎回記述する部分をextendにまとめました。

compass mixin simplify     

@mixin radius($size)

使用方法：
@include radius(10);

@mixin box($type: border-box)

使用方法：
@include box;
@include box(content-box);

general mixin     

@mixin fz($size)

使用方法：
@include fz(16);

@mixin middleline($height, $ie: 0)

使用方法：
@include middleline(25,2);

  • カテゴリ名とか
  • タグとか
  • ただし1行に限る

figure     

@mixin circle($size)

使用方法：
@include circle(100);

@include middleline を併用することで、簡易なアイコンっぽいものも作れてしまいます。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

@mixin rounded($height,$display: inline-block)

使用方法：
@include rounded($width,$height);

  • カテゴリ名とか
  • タグとか
  • ただし1行に限る

@mixin arrow( $direction: right, $size: 10, $color: $black)

使用方法：
@include arrow(right,20,#1986b3);

@mixin arrowlink($top, $size: 10, $color: $black)

使用方法：
@include arrowlink(6,$gray,2);
@include arrowlink(6); リンクの横などによくある三角マークは、:before擬似要素にこのmixinをあてることで実現できます。

css sprite     

@mixin sprite_image($src, $display: block)

使用方法：
@include sprite_image("../images/sprite.png", inline-block);

@mixin sprite_position($pos_x, $pos_y, $i, $line: x)

使用方法：
@include sprite_position(0, 50, 6, y);

@mixin sprite($src, $pos_x, $pos_y, $i, $display: block, $line: x)

使用方法：
@include sprite("../images/sprite.png", 0, 50, 6, inline-block, y);

PLACTICE

上記のspriteのmixinと、配列・@for文を利用するとCSSスプライトの記述が格段に少なくなり、
さらに増減・変更にも柔軟に対応できるのでオススメです。

SAMPLE DOWNLOAD