[Sass]４つの値を指定するだけでストライプ柄（縞模様）を実装するmixin

更新日: 2019/10/18
公開日: 2014/04/16

カテゴリー:
- CSS

CSSでストライプ柄（縞模様）を実現させる方法を見つけたので、それをmixinにしてみました。

ストライプ柄のタイプ（斜め、横、円など）
色1
色2
線の太さ

の４つの値を指定するだけで背景をストライプ柄にデザイン出来ます。

ストライプ柄のサンプル
ストライプ柄のスタイルを吐き出すmixin
参考になったページ・本

ストライプ柄のサンプル

Chrome、FireFox、IE10、Safariで確認しました。

Opera、IE9以下は残念ながら動かず（背景が白色になります）。あとChromeで確認すると分かりますが、斜めのストライプ柄にした時に歪みます。（アンチエイリアスに弱い？）

ストライプ柄のスタイルを吐き出すmixin

mixinはSCSS用です。なるべく簡単に使えるよう最小限の構成（引数）にしてます。

@mixin stripeBg($type: 45, $color1: #fff, $color2: #000, $size: 10) {
  @if not(unitless($size)) {
    //サイズに単位が付いてたら削除
    $_nounit_divisor: (floor($size) * 2) % 2 + 1;
    $size: ($size / $_nounit_divisor);
  }
  @if type_of($type) == string {
    //サークル（円）指定の場合
    background: repeating-radial-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == number) {
    //角度指定の場合
    @if not(unitless($type)) {
      //角度に単位が付いてたら削除
      $_nounit_divisor: (floor($type) * 2) % 2 + 1;
      $type: ($type / $_nounit_divisor);
    }
    background: repeating-linear-gradient(
      $type + deg,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == list) {
    //to right,to bottomの場合
    background: repeating-linear-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
}

引数について

それぞれ4つの引数について簡単な説明を。ちなみに角度の「deg」や「px」の単位は付けても付けなくても大丈夫です。

$type: 数値（もしくは’cricle’や’to right’など）

ストライプ柄のタイプを指定します。斜め、縦・横、円のストライプ柄にするには引数に以下の値を渡します。

斜めのストライプなら「45」などの数値（角度）を指定
横なら「to right」もしくは「to left」、縦なら「to top」もしくは「to bottom」と指定
円なら「circle」と指定

デフォルトは「45」に設定しています。

$color1: 色

1つ目の色を指定します。デフォルトは白（#fff）を設定しています。

$color2: 色

2つ目の色を指定します。デフォルトは黒（#000）を設定しています。

$size: 数値

ストライプの線の幅（ピクセル）を指定します。単位は入れないで、数値のみを指定します。デフォルトは10pxに設定しています。

使い方

デフォルト引数を指定しているので、mixinのソースコードを予め記述して

.stripeBox {
  @include stripeBg;
}

とインクルードするだけで背景がストライプ柄になります。（白黒ですが）

色を指定する場合は第二引数、第三引数で色を入力して下さい。

.stripeBox {
  @include stripeBg(0, #E67E22, #D35400, 5);
}

縦・横や円は第一引数にこんな感じで指定します。

//横ストライプ
.horizontalStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(to right, #E67E22, #D35400, 5);
}

//縦ストライプ
.verticalStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(to bottom, #E67E22, #D35400, 5);
}

//円ストライプ
.circleStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(circle, #2ECC71, #27AE60, 20);
}