10 Useful Sass Mixins for Modern Developer

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. I’ve been using Sass for quite sometime and found out that mixins are something any front-end developer would enjoy and take advantage of saving time and being more efficient.

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. It save quite a lot of time and helps developers ensuring that the code is not redundant and organized nicely.

I recommend using Compass as they have many built in mixins that simplify developers work.

1. Vendor Prefixing

Source: Useful Sass (SCSS) mixin Snippets

@mixin css3($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
Usage:
.border_radius {
@include css3(transition, 0.5s);
}

2. Responsive Breakpoints

Source: Handy Sass Mixins

@mixin breakpoint($point) {
@if $point == large {
@media (min-width: 64.375em) { @content; }
}
@else if $point == medium {
@media (min-width: 50em) { @content; }
}
@else if $point == small {
@media (min-width: 37.5em) { @content; }
}
}
Usage:
.page-wrap {
width: 75%;
@include breakpoint(large) { width: 60%; }
@include breakpoint(medium) { width: 80%; }
@include breakpoint(small) { width: 95%; }
}

3. Retina Images

Source: Easy retina-ready images using SCSS

@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
}
Usage:
div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}

4. Clearfix

Source: A new micro clearfix hack

@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
Usage:
.article {
@include clearfix();
}

5. Black & White

Source: Useful SASS Mixins

@function black($opacity){
@return rgba(0,0,0,$opacity)
}
@function white($opacity){
@return rgba(255,255,255,$opacity)
}
Usage:
.my-class{
background:black(0.15);
color:white(0.9);
}

6. Emboss & Letterpress

Source: Useful SASS Mixins

@mixin box-emboss($opacity, $opacity2){
box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
Usage:
.box{
@include box-emboss(0.8, 0.05);
}

7. Opacity

Source: Handy Sass Mixins

@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
Usage:
.article-heading {
@include opacity(0.8);
}

8. Absolute Positioned

Source: Handy Sass Mixins

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
Usage:
.abs {
@include abs-pos(10px, 10px, 5px, 15px);
}


9. Line Height

Source: Handy Sass Mixins

@mixin line-height($heightValue: 12 ){
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.125 * $heightValue) + rem;
}
Usage:
body {
@include line-height (16);
}

10. Animated Image Caption

Source: 4 useful SASS mixins

@mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) {
display:inline-block;
position:relative;
overflow:hidden;
& img
{
display:block;
width:100%;
height:auto;
}
& span.outer
{
display:block;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:$padding;
color:$font-color;
position:absolute;
bottom:-100px;
-webkit-transition: bottom $transition-speed ease;
-moz-transition: bottom $transition-speed ease;
-o-transition: bottom $transition-speed ease;
-ms-transition: bottom $transition-speed ease;
transition: bottom $transition-speed ease;
& span.inner
{
margin:0px;
position:relative;
}
&:before
{
content: " ";
display:block;
position:absolute;
z-index:0;
left:0px;
top:0px;
width:100%;
height:100%;
background:$bg-color;
filter: alpha(opactiy=($bg-opacity * 100));
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity * 100})";
-moz-opacity: $bg-opacity;
-khtml-opacity: $bg-opacity;
opacity: $bg-opacity;
}
}
&:hover span.outer
{
bottom:0px;
}
}
Usage:
a
{
@include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)
}