【Sass】4つの値を指定するだけでストライプ柄(縞模様)を実装するmixin

photo credit: marfis75 via photopin cc
photo credit: marfis75 via photopin cc

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

  1. ストライプ柄のタイプ(斜め、横、円など)
  2. 色1
  3. 色2
  4. 線の太さ

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

 ストライプ柄のサンプル

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

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

See the Pen Stripe mixin by sioichi (@increment-log) on CodePen.5651

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

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

引数について

それぞれ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のソースコードを予め記述して

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

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

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

参考になったページ・本

このストライプ柄のmixin作成で参考になったページ・本のご紹介。

Stripes in CSS | CSS-Tricks

Stripes in CSS | CSS-Tricks

はてブ数
Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd ...

斜めストライプはChromeだと歪んでしまうので、もし斜めストライプを使う場合は薄めにしてフワッと見せるのが良いかもしれません。

最終更新日:2016年3月6日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/stripe-scss-mixin/trackback/