Hey to Amasty blog readers!
Today we are going to talk about LESS preprocessor and its usage for Magento 2 stores.
As an experienced frontend developer, you should know how to utilize LESS and for what benefits (compared with CSS). In this post, we'll try to describe how the CSS files structure, syntax, media queries stack up against those of LESS.
So, let's find out what possibilities the preprocessor gives to us.
Read how LESS and CSS are engaged in our Magento 2 Blog extension.
LESS vs. CSS: the pros and cons
One of the undeniable advantages of LESS is that it simplifies the management of a large volume of CSS styles and makes CSS more flexible. Moreover, this stylesheet language adds multiple dynamic features to CSS; it introduces variables, nesting, operators, functions and mixins.
Our challenge today is to figure out (1) how to tell the difference between LESS and CSS, (2) how to write styles using LESS correctly, and (3) how to compile LESS to CSS with Grunt.
Files structure
The first difference between LESS and CSS lies in the files structure and in the method of connecting styles to a site.
CSS files structure
To connect CSS you need to create all the necessary *.css files and connect them to the page by recording in the *.xml file:
Once it's done, your styles get to the <head> tag of your page and each of the CSS files presents a server request (if merge CSS is disabled).
In this, the generated statics will look like this:
CSS files of your module get to the version*** folder, as well as all the other responding files, such as .js and images.
LESS files structure
By using LESS you need to adhere to another files structure: /<Namespace>_<Module>/web/css/source/_module.less:
You should keep to the structure for modules and for the general theme: <theme_dir>/web/css/…
Learn more from here.
The LESS files structure allows the platform to take your styles and gather them in one or two files styles-m.less, styles-l.less, which are later generated by Magento.
In this case, you’ll see something like this in your browser:
The *.less file gets into another directory and is gathered along with other styles. In this, the generated .css file gets into the styles-m.css and styles-l.css files.
LESS and CSS syntax
The second difference between LESS and CSS lies in the syntax. However, the LESS syntax is little different from the CSS one, as the stylesheet language is a CSS preprocessor.
This means that any CSS code is a valid LESS code (but additional LESS elements won’t work in a plain CSS).
You can learn more about LESS syntax from here.
This is how a plain CSS will look like:
And here are the same styles written in LESS:
Let’s review the differences in details.
Magento media queries
Magento 2 supports the responsive web design and mobile first. The default Blank and Luma themes use Magento UI library, which applies CSS3 media queries.
The Magento 2 media queries are realized as mixin .media-width() that can be used in your file:
In this example, the button with .button class will have a golden background on mobile screens (if there are no other media queries, the style will be valid for all screen resolutions). However, for the 768px resolution, the background will be green. Where on 1024px screen the background will be red:
The media query will be generated in:
Consequently, @extremum can take a ‘min’ or ‘max’ value. And @break will take a breakpoint value. Where @screen__m is a variable for the breakpoint. You can find its value and other variables here: vendor/magento/magento2-base/lib/web/css/source/lib/variables/_responsive.less:
mixin . lib-css()
This mixin is applied in Magento 2 for further manipulations with properties and variables.
For example, you can delete definite properties without a need to rewrite all the style. For this, you should assign it to the false variable. Once it’s done, you won't see the property during the compilation:
Also, by using the mixin . lib-css() you can automatically add prefixes to the properties. All you need is to add 1 to the 3m arguments. E.g.: without mixin . lib-css():
E.g.: when using mixin . lib-css():
The styles will have the next look in Chrome:
LESS possibilities
LESS provides an opportunity to use variables, functions and mixins. As we've already said, this gives us a chance to make the code more flexible and manageable.
Let's review several of the LESS possibilities based on further examples:
E.g.: From the example below, we can see how easy it is to generate many same-type CSS styles using LESS cycles. For this, we write a small LESS cycle only:
And after the compilation, we get the next CSS classes:
E.g.: Moreover, by using the LESS functions we can easier manipulate colors. For instance, the function darken(); makes the original color darker:
LESS:
CSS:
At the same time, we can use ready-made mixins to manipulate the visibility, clearfix, rotate flex layout or draw a pointer.
E.g.: We can draw an arrow and turn it 90 degrees:
It will compile in CSS this way:
How to work with LESS using Grunt?
There are several ways you can compile LESS styles to CSS. We will describe the most popular methods below.
You can read more about all the ways here.
Compile LESS in production mode
To apply the method, you need to clean the next directories first:
- pub/static/frontend/<Vendor>/<theme>/<locale>
- var/cache
- var/view_preprocessing
Once it’s completed, you need to launch the static content compilation using the next command: magento setup:static-content:deploy
Compile LESS in developer and default mode
For this method, you can use Grunt task runner. Before the compilation, you need to install NodeJS and grunt-cli on your local machine.
If you want to know how to install them correctly, read here or see the complete tutorial.
Once Grunt is set up, all you need is to use the grunt exec:<theme> command to republish symlinks to the pub/static/frontend/<Vendor>/<theme>/<locale> directory. Then apply the grunt less:<theme> command to compile the .less files to CSS.
To make your LESS code clear and readable use the Magento 2 LESS coding standards. To learn more about the general formatting rules, read here.
Final Word
As you can see, LESS gives much more opportunities to work with styles in Magento 2. By utilizing LESS you can easily write responsive styles, and do not care about connecting them to a page. You no longer need to write a lot of homogeneous code, which is difficult to maintain in future.
That’s a wrap for today. We hope that the article gave you a basic understanding of the difference between LESS and CSS, as well as of its main benefits.
If you still have questions, drop us a line in the comments below, and we’ll do our best to answer them.
Stay tuned!