ボックスの角を画像で装飾するCSSを簡単にするmix-in

画像を4つかどにそれぞれ入れたいときの指定がめんどいのでmixin化してみた。
もっと効率いい書き方ありそうだけどとりいそぎ。

※分かりにくいのであとで図とかつける予定です

Usage

1つのボックスだと2つしか生成できないので、ボックス内のdiv.innerなり見出しなりを利用します

article {
  & >.inner {
    @include box-corner_top(
        // 画像のパスはconfig.rbとかによって多少変わります
        '/img/img_corner_top-left.png',
        '/img/img_corner_top-right.png');
  }

  @include box-corner_bottom(
      // 画像のパスはconfig.rbとかによって多少変わります
      '/img/img_corner_bottom-left.png',
      '/img/img_corner_bottom-right.png');
}

Usage2 : ボーダーがつくとき

ボックスにボーダーが指定してあると、ボーダーが角画像の外側に来てしまうので、場合によってオフセットをかけます。

article {
  $border-width: 2px;

  border: $border-width solid gray;
  & >.inner {
    @include box-corner_top(
        // 画像のパスはconfig.rbとかによって多少変わります
        '/img/img_corner_top-left.png',
        '/img/img_corner_top-right.png',
        $border-width);
  }

  @include box-corner_bottom(
      // 画像のパスはconfig.rbとかによって多少変わります
      '/img/img_corner_bottom-left.png',
      '/img/img_corner_bottom-right.png'
      $border-width);
}

Usage3 : Retina対応

article {
  $screen-racio: 2.0;
  $img-scale: 1/$screen-racio;

  & >.inner {
    @include box-corner_top(
        // 画像のパスはconfig.rbとかによって多少変わります
        '/img/img_corner_top-left.png',
        '/img/img_corner_top-right.png',
        0, $img-scale);
  }

  @include box-corner_bottom(
      // 画像のパスはconfig.rbとかによって多少変わります
      '/img/img_corner_bottom-left.png',
      '/img/img_corner_bottom-right.png',
      0, $img-scale);
}

インターフェイス

• box-corner($imgurl_top-left, $imgurl_top-right, $imgurl_bottom-left, $imgurl_bottom-right, $offsetBorder:0, $scale:1.0, $el:'> .inner')
• box-corner_top($imgurl-left, $imgurl-right, $offset:0, $scale:1.0)
• box-corner_top-left($imgurl, $offset:0, $scale:1.0)
• box-corner_top-right($imgurl, $offset:0, $scale:1.0)
• box-corner_bottom($imgurl-left, $imgurl-right, $offset:0, $scale:1.0)
• box-corner_bottom-left($imgurl, $offset:0, $scale:1.0)
• box-corner_bottom-right($imgurl, $offset:0, $scale:1.0)

ソースコード

_box-corner.scss

@import 'compass';

@mixin _box-corner_base() {
  position: relative;

  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
  }
}

@mixin _box-corner_img($imgurl, $scale:1.0) {
  $width : image-width($imgurl) * $scale;
  $height : image-height($imgurl) * $scale;

  width: $width;
  height: $height;
  background: image-url($imgurl) no-repeat;
  @if $scale != 1.0 {
    background-size: $width $height;
  }
}

@mixin box-corner_top-left($imgurl, $offset:0, $scale:1.0) {
  @include _box-corner_base();

  &:before {
    @include _box-corner_img($imgurl, $scale);
    top: - $offset;
    left: - $offset;
  }
}
@mixin box-corner_top-right($imgurl, $offset:0, $scale:1.0) {
  @include _box-corner_base();

  &:after {
    @include _box-corner_img($imgurl, $scale);
    top: - $offset;
    right: - $offset;
  }
}

@mixin box-corner_bottom-left($imgurl, $offsetBorder:0, $scale:1.0) {
  @include _box-corner_base();

  &:before {
    @include _box-corner_img($imgurl, $scale);
    bottom: - $offset;
    left: - $offset;
  }
}
@mixin box-corner_bottom-right($imgurl, $offsetBorder:0, $scale:1.0) {
  @include _box-corner_base();

  &:after {
    @include _box-corner_img($imgurl, $scale);
    bottom: - $offset;
    right: - $offset;
  }
}

@mixin box-corner_top($imgurl_left, $imgurl_right, $offsetBorder:0, $scale:1.0) {
  @include _box-corner_base();

  &:before {
    @include _box-corner_img($imgurl_left, $scale);
    top: - $offset;
    left: - $offset;
  }
  &:after {
    @include _box-corner_img($imgurl_right, $scale);
    top: - $offset;
    right: - $offset;
  }
}

@mixin box-corner_bottom($imgurl_left, $imgurl_right, $offsetBorder:0, $scale:1.0) {
  @include _box-corner_base();

  &:before {
    @include _box-corner_img($imgurl_left, $scale);
    bottom: - $offset;
    left: - $offset;
  }
  &:after {
    @include _box-corner_img($imgurl_right, $scale);
    bottom: - $offset;
    right: - $offset;
  }
}



@mixin box-corner($imgurl_top-left, $imgurl_top-right,
    $imgurl_bottom-left, $imgurl_bottom-right,
    $offset:0, $scale:1.0, $el:'> .inner') {
  @include _box-corner_base();

  #{$el} {
    @include _box-corner_base();
    &:before {
      @include _box-corner_img($imgurl_top-left, $scale);
      top: - $offset;
      left: - $offset;
    }
    &:after {
      @include _box-corner_img($imgurl_top-right, $scale);
      top: - $offset;
      right: - $offset;
    }
  }
  &:before {
    @include _box-corner_img($imgurl_bottom-left, $scale);
    bottom: - $offset;
    left: - $offset;
  }
  &:after {
    @include _box-corner_img($imgurl_bottom-right, $scale);
    bottom: - $offset;
    right: - $offset;
  }
}