LESS is More, or Tale about LESS and Magento 2

Magento 2 has many great features in comparison to the previous versions. I am not going to do an overview, there are a plenty of great comprehensive articles on the matter all over the internet. The topic I am going to cover is actually very much related to the front-end development. I am sure it won't be something new to advanced and experienced developers. However, beginners and Magento owners who do code or make slight changes to their stores by themselves may find it quite useful.

What users usually see at any webpage is a nice layout, some images, inviting to the eye font. People who are not familiar with programming often think that it is a designer's work alone - a designer draw templates for pages and voila! - Here a site is. However we know it's not that simple and the trend is a developer is his own designer, playing with UI elements like with LEGO blocks. What hides behind the beautiful image is hundreds lines of code, HTML and CSS mainly. Those are stylesheet files, which define how a site appears on production, including elements such as the layout, colors and fonts.

While CSS is successfully being used for the last 18 years, there is always room for improvement. That is how new stylesheet languages such as SASS and LESS have come to life. LESS is getting more and more popularity among developers community with every day due to how powerful it is, although many programmers still use CSS alone old-fashioned style and there's nothing wrong about that.

LESS brings dynamic behavior to CSS, and extends CSS with new features such as variables, functions, mixins, nested rules and others. Using LESS is a great choice for developing advanced sites with complicated structure, e.g. online shops. LESS as a language is easy to learn, actually, every single feature is represented in the overview on the official site and in practice it is a ready-to-go collection of pieces of code you can simply paste in your project. A picture paints a thousand words, so, here is a vivid example.

Creating Box with Rounded Corners

To create a box with rounded corners with CSS you have to type this code every single time you want to place the box on page:

.tab 
{
    -webkit-border-top-left-radius: 7px; 
    -webkit-border-top-right-radius: 7px; 
    -moz-border-radius-topleft: 7px; 
    -moz-border-radius-topright: 7px; 
    border-top-left-radius: 7px; 
    border-top-right-radius: 7px;
}

A cool feature LESS has is mixins, which allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. So, to create the box use need to declare the element .rounded_top just once,

.rounded_top 
{
    -webkit-border-top-left-radius: 7px; 
    -webkit-border-top-right-radius: 7px; 
    -moz-border-radius-topleft: 7px; 
    -moz-border-radius-topright: 7px; 
    border-top-left-radius: 7px; 
    border-top-right-radius: 7px;
}

And in case you need that box again you can just type in the element's name along with the properties list, how cool is that?

.tab 
{
    background: #222; 
    color:#ddd; 
    .rounded_top;
}
.submit 
{
    .rounded_top;
}

LESS and Magento 2

What's great about Magento 2 is its support of LESS preprocessor, no, let me say it that way: LESS is built DIRECTLY into Magento! There is no need to install LESS on your own, use 3rd party compilers or reinvent the wheel to make it work, - stable PHP LESS compiler is already in there. During development, changes that you make to stylesheet files are available immediately on the fly. You do not have to type in any terminal commands or use a compiler app. Magento takes care of it for you. While working with frontend you just switch between an editor and browser to see the implemented changes within a second you have made them. Gee, it makes the development process extremely easier and faster. In production Magento pre-compiles the .less files, so, what you end up with is an already optimized and cacheable static .CSS files.

Let's face it: LESS simplifies work process for web developers and makes it easier to create really beautiful high quality sites. For those who have not heard or have not tried it yet, I recommend you give it a shot.