Buttons do not happen much

About six months ago I read the article “Why use preprocessors” . In it, the author describes the advantages of preprocessors on the example of the implementation of custom buttons. The article turned out to be informative and very interesting. The author cited various preprocessors as examples and explained why he stopped at Sass. On account of the color of pencils and taste, I have no right to argue, everyone has their own views. But even then, the description that Less was not powerful enough seemed to me to be unfair. Even then, I wanted to do something similar, to embody the idea of ​​the author in other preprocessor languages ​​(Less, Stylus). At the time of reading the article, there was no time to do something with it. And just recently, one weekend, I remembered this article and decided to implement the idea of ​​the author - only with Less. I didn’t see the point of doing something new, so I decided to help the author in the development of the project, made a fork from his repository, did the necessary work and created a pull request.

Less or Sass or Stylus or something else there?

It all depends on the specifics of your project and on your needs. If you are not familiar with any of the above preprocessor languages, it's time to start to get acquainted. Not only will you discover many new and interesting things, so also get a good level up. In our projects we use Less. And you know, for two and a half years, I never thought that Less was deprived of functionality, speed, or something else there. Yes, in the first implementations it was damp and demanded serious improvements, but at the moment it is very functional and you can implement a lot of your ideas on it, you just need to read the documentation and combine the features that this preprocessor language offers us. I often hear that preprocessors are hard, they only make it difficult to write code, so additional tools are needed to use them. Do not listen to anyone and start using preprocessors.

Advantages of preprocessors

Variables, mixins, imports, nesting and more. It’s not for nothing that I was the first to call variables, mixins, imports, and nesting - they constitute the majority of the entire code, all other features of this or that preprocessor language complement them. This fun four allows us to easily implement the principle of DRY , to make the support of the code simpler and easier, to get rid of unnecessary copy-paste.

Variables

I can not imagine how now, in the realities of the rapid development of the Front End, you can live without variables. Those who say that variables are not needed, they only interfere, clutter up the code - they blatantly lie are wrong. A simple example: you need to change the color of the link from red to blue in two files in four places. The task is simple, but what if there are not two files, but twenty-two, and you need to change not in four places, but, say, on every fifth line of each file. And here it begins: open all twenty-two files, search for the desired color, change, save, check the work. Error, come on new. And if there was a file with variables, everything was much simpler - open this file, change only one line, save, profit. The result is obvious. And the work is less and the percentage of errors is much less (I would say that it tends to zero). A simple example of a file with variables that I used: _variables.less

In it, we store brand names ( @ brands-name ), colors ( @ brands-color ) that correspond to these brands, and the total number of items on the list ( @ brands-count ).
')

Mixins

Impurities, mixins - already one name tells us that we can take several pieces of code and put them under one name. Moreover, inside you can specify the names of classes, use the parent selector, specify local variables, set conditions and much more. The most obvious advantage - once written, many times used throughout the project. Mixins are very similar to functions in programming languages. They can be created both with parameters and without parameters , with conditions , used as functions that return the results of their work . Once I had the task to implement tags to products in the form of tags with text with long shadows. Shadows could be of different sizes and colors. The number of tags, their color could also vary. A little thought, reading the official documentation, came to this option . If we did not use Less or any other preprocessor, then on pure CSS such a solution would take many lines of code, the name of each class would need to be written in pens, each step of the shadow should be explicitly indicated. Of course, I love challenging tasks, but not to such an extent. This example can be implemented not only in Less, but also in other preprocessor languages.

Imports

In standard CSS, all @ imort rules should go at the very beginning of the file, with the exception of @ harset, if there is one ( @ imort rule ). Preprocessors add their own features to this directive. In particular, for Less, it does not matter what part of the file will be @ imort. If after the @imort “filename” does not specify the extension, the default file will be imported with the extension .less . It is also possible to import php and css files . Other options are available for @ imort rules . The obvious benefit when using @ import directives is to organize the files within the project and then use them. As we did with mixins and variables files, and then they were imported into other files and reused. An example .

Nesting

This is both an advantage and a disadvantage. Let me explain why the disadvantage. Many immature minds begin to repeat their DOM-tree completely, forgetting that we will get very slow and hard-to-maintain code at the output. We have a Style guide on the project, which describes a lot of interesting things, including what the maximum permissible level of nesting can be. In order not to generate topics for discussion, I will say only that with nesting you need to be extremely careful, otherwise you can come to the situation that in order to redefine one or another style, you will need to resort to the services !important It is also worth mentioning about the parent selector . It opens up unprecedented opportunities for us that were not available to us in pure CSS. Only, again, I repeat, use it with caution, only when you understand the logic of its work 100%. An example .

What else

All those advantages that preprocessors give us, and in particular Less, this is not the whole list. In fact - yummy enough. And this concerns not only Less. Therefore, read manuals, practice, combine several features into one and you will see how powerful and functional preprocessors are.

Thanks for attention.
If there are any inaccuracies in the text of the article - write in a personal.