Christos Monogios

When working with less you most probably have to do some calculations and assign their result in a CSS property, for example into a width of a CSS class or a margin of an CSS id.

Apart from the calculated number you want to generate valid CSS code, so you also have to apply a measuring unit to this number, for example pixels or ems or percentages.

The CSS calc rule helps you to do mathematical calculations in your CSS files. For example you could calculate the height of a div element based on a set of less or sass variables. But what happens to the mathematical expressions inside the calc rule when your code gets minified for production? The less engine will calculate the expression inside calc(…) during the minification process and thus calc will contain a wrong value.

Less supports the creation of pseudo-functions that can be used as CSS-classes in your less files. Doing this way you can save multiple keystrokes, automate your stylings and avoid syntax errors.

Lets take a look at a function that automates the creation of CSS box-shadows and supports new browsers by making use of browser prefixes.