CodePen

HTML

            
              <div class="default"><b>Default:</b> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alt"><b>Alt:</b> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
            
          
!

CSS

            
              /*HORIZONTAL VERTICAL BLUR COLOR*/

@mixin boxshadow($h: 0px, $v: 1px, $b:2px, $brand-color: rgba(0,0,0,.25)){
  -webkit-box-shadow : $h $v $b $brand-color;
  -moz-box-shadow : $h $v $b $brand-color;
  box-shadow : $h $v $b $brand-color;
}

$margin:1.4em;

%div {
  display:block;
  padding:$margin;
  margin:$margin;
}

.default{
  @extend %div;
  @include boxshadow(); /*used default variables*/
}
.alt {
  @extend %div;
  @include boxshadow(1px,2px,3px,rgba(red,0.5));/*uses user provided variables*/
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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