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);
}

@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)
}

p {

@include font-size(14px)

}

OUTPUT

p {
  font-size: 14px; //Will be overridden if browser supports rem
  font-size: 0.8rem;
}

p {

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

font-size: 0.8rem;

}

Sass Mixin obsession

MIXIN

USAGE

OUTPUT

Enjoy coding…

Alexander

Sass Mixin obsession

MIXIN

USAGE

OUTPUT

Enjoy coding…

Related Content

Organizing Your CSS / SCSS Code

Bourbon – A simple and lightweight mixin library for Sass

Sass Clearfix Mixin

Alexander