CSS3 calc() in SASS

Some times you need to make a vertical menu with 100% height but you have a 50px of top menu. How can I calculate the difference?

One solution is to create a JavaScript function for calculate the difference between the top menu and the vertical menu.

But instead of this you have now a CSS3 function called calc(). With calc(), you can perform calculations to determine CSS property values. The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required.

Syntax

calc(expression);

With SASS we can create a mixin with the following values:

SASS mixin

/* CSS3 calc() function to perform calculations */
@mixin calc($property, $expression) { 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: -moz-calc(#{$expression});
  #{$property}: calc(#{$expression}); 
} 

Using the calc() mixin

@include calc(height, "100% - 50px");

Remember to include a fallback because this method isn't support for all browsers. To check browser support please check this link

;)