Addons

Addons has some functions that will help you.

Usage

@import "mussarela/mussarela/addons";

Functions

Pixels to ems

Convert pixels to ems. You can avoid px declaration if you want. The base font is 16px, you can change with $base-font variable or in settings

Params

em($size);

.element {
  font-size: em(20px); // or em(20);
}

Pixels to rems

Is like pixel to ems, but to rems.

Params

rem($size);

.element {
  font-size: rem(20px); // or rem(20);
}

Shade & Tint

Mix any colors with black or white.

Params

tint($color, $percentage); shade($color, $percentage);

.element {
  background: tint(#ff0, 20%);
  color: shade(#ff0, 20%);
}

Text inputs

Define a variable with all inputs text-based.

#{$all-text-input} { }
#{$all-text-input-hover} { }
#{$all-text-input-focus} { }
#{$all-text-input-active} { }

Timing functions

Is based on Bourbon timing function

.element {
  transition: all 1s $ease-in-quad;
}