bradxr
8/7/2018 - 4:00 PM

Create Reusable CSS with Mixins

Mixin - a group of CSS declarations that canbe reused throughout the style sheet Can be thought of as a function for CSS

snippet.scss
content_copyfile_download
// writing a mixin for the box shadow property
@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}

// using the mixin
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}