5 opportunities LESS, which you might not know

When developing interfaces, I spend considerable time working with styles written in LESS or SCSS. And often I notice that developers use only a limited set of preprocessor capabilities. In this article I want to talk about the possibilities of the preprocessor LESS , which are rarely used, but can significantly simplify the writing of styles.

Data-uri function

It is often convenient to include an external file, such as an icon, directly into the styles using the data: URI scheme . The advantages of this method are known to all and I will not list them. There are many ways to convert a file to this format: these are online converters , plug-ins for Grunt and Gulp, a module for Node.js, and even a console utility . However, LESS has a built-in function for such a conversion, so there is no need to additionally configure something.

LESS

.icon-add { background-image: data-uri("../icons/add.svg"); } 

CSS

 .icon-add { background-image: url("data:image/svg+xml,..."); } 

Functions image-width and image-height

These functions allow you to get the width and height of an arbitrary image. This way you get rid of the need to manually set them. As a result, the probability to make a mistake and specify the wrong size is eliminated, or to forget to update the dimensions after editing the image.

LESS

 .logo { width: image-width("../images/logo.png"); height: image-height("../images/logo.png"); } 

CSS

 .logo { width: 198px; height: 125px; } 

Functions for mixing colors

Sometimes the designer creates new colors by mixing two existing colors from a fixed palette. In this case, the developer, when transferring colors to CSS, as a rule, copies it with a pipette and inserts it in the #RRGGBB format, destroying the designer’s intent. And if the color has a translucency, then this is doubly wrong, since such a color should change when applied to a different background.

Meanwhile, LESS has built-in functions for mixing colors , and the blending modes completely coincide with those used in the Photoshop graphic editor. All that remains for the developer to do is transfer the layer settings manually or using Avocode .

LESS

 .link { color: fadeout(multiply(#ff6600, #999999), 20%); } 

CSS

 .link { color: rgba(153, 61, 0, 0.8); } 

Extend pseudo-class

I think many of you have used mixins, they allow you to use common styles in several places, but they have one drawback - duplication of the resulting CSS code. This drawback can be avoided if you use the extend pseudo-class instead of mixins, it allows you to inherit styles without duplicating them.

LESS

 .message { padding: 15px; border: 1px solid transparent; border-radius: 4px; } .message-success { &:extend(.message); background-color: #dff0d8; } .message-info { &:extend(.message); background-color: #d9edf7; } 

CSS

 .message, .message-success, .message-info { padding: 15px; border: 1px solid transparent; border-radius: 4px; } .message-success { background-color: #dff0d8; } .message-info { background-color: #d9edf7; } 

Combining Multiple CSS Properties

I noticed that the design is increasingly used such a design technique as multiple shadows. For example, an element has an internal shadow, and when you hover on it, an external one is added. In this case, the inner shadow will be set twice in CSS: for the normal state and for hover. However, this can be avoided by using the possibility of combining the values ​​of multiple properties using the + symbol.

LESS

 .button { box-shadow+: inset 0 0 10px #555; } .button:hover { .button; box-shadow+: 0 0 20px #000; } 

CSS

 .button { box-shadow: inset 0 0 10px #555; } .button:hover { box-shadow: inset 0 0 10px #555, 0 0 20px #000; } 

If you know other rarely used LESS features, then please share them in the comments.

Thanks for attention.