Striped background for Sass (scss mixin)

index.html

<div>
  <h2>Sass mixin for creating background stripes</h2>
  <p>Use:<strong> @include striped-bg($color, $number_of_stripes, $direction)</strong></p>
</div>
<div class="demo1">striped-bg()</div>
<div class="demo2">striped-bg(blue, 25, -20deg)</div>
<div><p>this alows you to control <i>angle</i>  and <i>intensity</i>, but when you choose high intensity, it gets quite ugly:</p> <div class="demo3"> like this : `striped-bg(blue, 100, -20deg)`</div> </div>
<div><p>in this case use: <strong>@include simple-stripes($color, $size, $mirrored)</strong></p><p> you won't be able to control the angle (always 45deg - <i>mirrored</i> or not), but high intensity is possible if you choose smaller size </p> </div>
<div class="demo4">simple-stripes() </div>
<div class="demo5">simple-stripes(#0084FF, 4px, true)</div>

Striped-background-for-Sass-(scss-mixin).markdown

Striped background for Sass (scss mixin)

choose color, intensity (number of stripes) and direction

A Pen by yonatanmn on CodePen.

License.

style.scss

//========== striped-bg ============//

@mixin striped-bg ($stripe-color: rgb(255, 0, 0),  $stripes-num: 4,$direction: 45deg) {
  $transparent: rgba(0, 0, 0, 0);

  $stripes-num: $stripes-num * 2;
  $stripe-width: 100% /$stripes-num;
  $gradient: ();
  
  @for $i from 1 through ($stripes-num - 1){
    $item: $stripe-color;
    $dump: ();
    
    @if $i % 2  == 0 {$dump:  $item $stripe-width * ($i), $transparent $stripe-width * $i;}  
    @else { $dump:  $transparent $stripe-width * $i, $item $stripe-width * ($i);}
    $gradient: join($gradient, $dump, comma);
  }
  background: linear-gradient($direction, $gradient);
}

//========== simple-stripes============//

@mixin simple-stripes($color: rgb(255, 0, 0), $size: 40px, $mirrored: false) {
    $angle: 45deg;
    @if $mirrored {$angle: $angle * -1}
    @if $size % 2 != 0 {
        $size: $size + 1px;
    }
    $intensity: 2;
    @include striped-bg($color,$intensity,$angle);
    background-size: $size $size;
}


//========== Demonstarion =============//

body { background: #DBDBDB}

[class ^= demo] {
  font-family: sans-serif;
  font-weight: bold;
   text-align: center;
  margin: 2em 1em;
  padding: 0.5em;
 border: 1px solid black;
}

%white-text{
  color: white;
  text-shadow: rgba(0,0,0,0.9) 0 1px 1px;
}
%black-text{
  color: black;
  text-shadow: rgba(255,255,255,0.9) 0 1px 1px;
}

.demo1 {
  @include striped-bg();  
  @extend %black-text;
}

.demo2 {
  @include striped-bg(blue, 25, -20deg);  
  background-color: #7B7BFF;
  @extend %white-text;
}
.demo3{
  @include striped-bg(blue, 100, -20deg);  
  background-color: #7B7BFF;
  @extend %white-text;
}
.demo4 {
  @include simple-stripes();
  background-color: #cc0000;
  @extend %black-text;

}
.demo5 {
  @include simple-stripes(#0084FF, 4px, true);
  background-color:black;
  @extend %white-text;
}

ZYgZjE.markdown

ZYgZjE

A Pen by yonatanmn on CodePen.

License.