Sass Mixin obsession

Since completely moving to Sass, I am really obsessed to make my work easier :) There are many Mixins that really help to speedup development and remove some of the tedious tasks ;)

“Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. 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. ” – Sass Basics

I will be showcasing some of the libs and resources here in the coming weeks. I only have one condition, Mixins should be simple dropin modules so that they can be used universally!

Here one Mixin, I love, that sets a REM font size with a Pixel fallback:

MIXIN

@function calculateRem($size) {

  $remSize: $size / 16px;

  @return $remSize * 1rem;

}
 

@mixin font-size($size) {

  font-size: $size;

  font-size: calculateRem($size);

}

USAGE

p {

  @include font-size(14px)

}

OUTPUT

p {

  font-size: 14px; //Will be overridden if browser supports rem

  font-size: 0.8rem;

}

Enjoy coding…