David Jones

Sass useful mixin examples

I have been using SASS for a while now and I would like to share some of the mixins I use on a daily basis.

Mixins are great for vendor prefixes. For example:

//Border radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
         -ms-border-radius: $radius;
                 border-radius: $radius;
}

//Background size
@mixin bg-size($value) {
     -webkit-background-size: $value;
         -moz-background-size: $value;
           -ms-background-size: $value;
              -o-background-size: $value;
            background-size: $value;
}

Also identifying break points.

@mixin break-point($point) {
    @if $point == mobile {
        @media all and (max-width: 480px) { @content; }
    }
    @else if $point == tablet {
        @media all and(min-width: 481px) and (max-width: 959px) { @content; }
    }
    @else if $point == desktop {
        @media all and (min-width: 960px)  { @content; }
    }
}