CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $maincolor: #b3c33a;
$stripecolor: #d2db88;

@mixin myTHINstripes($color1, $color2) {
  background-image:
    linear-gradient(
      45deg,
      $color1,
      $color1 3px,
        /* STRIPE 1 */
        $color2 3px,
        $color2 4px,
        /* STRIPE 1 */
      $color1 4px,
      $color1 10px,
        /* STRIPE 2 */
        $color2 10px,
        $color2 11px,
        /* STRIPE 2 */
      $color1 11px,
      $color1 17px,
        /* STRIPE 3 */
        $color2 17px,
        $color2 18px,
        /* STRIPE 3 */
      $color1 18px,
      $color1 21px
    );
  background-size: 10px 20px;
}

@mixin myTHICKstripes($color1, $color2) {
  background-image:
    linear-gradient(
      45deg,
      $color1,
      $color1 2px,
        /* STRIPE 1 */
        $color2 2px,
        $color2 4px,
        /* STRIPE 1 */
      $color1 4px,
      $color1 9px,
        /* STRIPE 2 */
        $color2 9px,
        $color2 11px,
        /* STRIPE 2 */
      $color1 11px,
      $color1 16px,
        /* STRIPE 3 */
        $color2 16px,
        $color2 18px,
        /* STRIPE 3 */
      $color1 18px,
      $color1 22px
    );
  background-size: 10px 20px;
}

body {
  padding: 10px;
  @include myTHICKstripes($maincolor, $stripecolor);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................