Sass and Compass for Designers

Stripping and adding units to values

When creating mixins there will be times when values need to either have their unit stripped or a unit added. Let's look at how we can do that.

Stripping the unit from a value

For example, perhaps a value returned by a function is 0%. If you want to use that as a value for a border, the % part is actually invalid CSS. Therefore we can strip the unit from a variable like this:

// A variable with a unit
$variable-with-unit: 0%;

// Strip the unit from the variable
$variable-without-unit: ($variable-with-unit * 0 + 1);

We add 0 and 1 (both without a unit) and then multiply our variable by it. This removes the unit as we are multiplying by a unit-less value.

Adding a unit to a variable value

This is how we can add a ...