
Buttons are never too many

Less or Sass or Stylus or something else there?
It all depends on the features of your project and on your needs. If you are not familiar with any of the above preprocessor languages, it's time to start getting acquainted. Not only will you discover a lot of new and interesting things, you will also get a good level up. In our projects we use Less. And you know, for two years with a ponytail, I never once thought that Less is deprived of functionality, speed, or something else there. Yes, in the first implementations it was damp and required 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 preprocessing language offers us. Often I hear that preprocessors are hard, they only make it difficult to write code, to use them you need additional tools.
Preprocessor Benefits
Variables, mixins, imports, nesting, and more. It was not for nothing that I called the first variables, mixins, imports and nesting - they make up most of the code, all the other features of a particular preprocessing language complement them. This fun four allows us to easily implement the DRY principle , make code support simpler and easier, and get rid of excess copy-paste.
Variables
I can’t 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 -
_variables.less
@brands-name: amazon, delicious, digg, disqus, eventbrite, eventful, intensedebate, lanyrd, pinboard, songkick, stumbleupon, gmail, google, evernote, grooveshark, instapaper, itunes, opentable, logmein, ninetyninedesigns, paypal, pocket, scribd, spotify, statusnet, stripe, yahoo, yelp, wikipedia, wordpress, ycombinator, bitcoin, cloudapp, creativecommons, dropbox, html5, ie, podcast, rss, skype, steam, windows, android, appstore, googleplay, macstore, appnet, blogger, bitbucket, dribbble, facebook, flattr, flickr, foursquare, github, googleplus, gowalla, instagram, klout, lastfm, linkedin, meetup, myspace, pinterest, quora, reddit, plurk, smashing, soundcloud, stackoverflow, tumblr, twitter, viadeo, vimeo, vk, weibo, xing, youtube, csgo, dota2, gm, lol, minecraft, tf2, quake, wot;
@brands-color: rgb(242,158,55), rgb(50,113,203), rgb(22,70,115), rgb(46,159,255), rgb(255,86,22), rgb(55,96,149), rgb(0,153,225), rgb(46,106,194), rgb(0,0,255), rgb(255,0,80), rgb(235,73,36), rgb(219,64,56), rgb(78,108,247), rgb(107,177,48), rgb(233,122,47), rgb(34,34,34), rgb(82,81,82), rgb(153,0,0), rgb(0,0,0), rgb(7,34,67), rgb(50,104,154), rgb(222,90,95), rgb(35,28,26), rgb(96,175,0), rgb(130,157,37), rgb(47,126,214), rgb(162,0,194), rgb(230,0,16), rgb(17,17,17), rgb(70,70,70), rgb(255,102,0), rgb(235,151,55), rgb(49,44,42), rgb(0,0,0), rgb(0,126,229), rgb(255,54,23), rgb(0,161,217), rgb(147,101,206), rgb(255,127,37), rgb(0,162,237), rgb(0,0,0), rgb(72,187,239), rgb(164,198,57), rgb(0,0,0), rgb(185,193,62), rgb(0,125,203), rgb(49,120,189), rgb(238,90,34), rgb(32,80,129), rgb(234,76,137), rgb(72,99,174), rgb(138,186,66), rgb(255,0,132), rgb(0,114,177), rgb(23,21,21), rgb(221,74,56), rgb(255,114,10), rgb(63,114,155), rgb(227,74,37), rgb(220,26,35), rgb(0,131,168), rgb(255,0,38), rgb(0,0,0), rgb(201,22,24), rgb(168,36,0), rgb(255,87,0), rgb(207,104,47), rgb(255,79,39), rgb(255,69,0), rgb(241,132,54), rgb(55,74,97), rgb(70,192,251), rgb(231,115,46), rgb(0,162,205), rgb(69,104,142), rgb(215,88,77), rgb(10,93,94), rgb(255,0,0), rgb(182,115,0), rgb(195,61,43), rgb(17,148,240), rgb(215, 153, 34), rgb(148,200,100), rgb(179,82,21), rgb(205,24,0), rgb(255,64,5);
@brands-count: length(@brands-name);
In it, we store the names of brands ( @ brands-name ), colors ( @ brands-color ) that correspond to these brands, and the total number of elements in the list ( @ brands-count ).
Mixins
Admixtures, 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 class names, use the parent selector, specify local variables, set conditions, and much more. The most obvious plus - once written, many times we use 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 of implementing product tags 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. After a little thought, after reading the official documentation, I came to this option . If we had not used Less or any other preprocessor, then in pure CSS such a solution would have taken up a lot of lines of code, the name of each class would have to be written with pens, each step of the shadow should be specified explicitly. Of course, I love difficult 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 @ import rules should go at the very beginning of the file, with the exception of @ сharset, if any ( @ import rule ). Preprocessors add their own features for this directive. In particular, for Less it doesn't matter what part of the file @ imrort will be. If you
@imрort “filename”
do not specify an extension after , then by default the file with the extension will be imported .less
. It is also possible to import php and css files . Other options are available for @ imrort rules . The obvious benefit when using the @ imrort directives is the organization of files within the project and their subsequent use. As we did with the files of mixins and variables, and then they were imported into other files and reused.An example .Nesting
This is both an advantage and a disadvantage. I will explain why the disadvantage. Many fragile minds begin to completely repeat their DOM tree, forgetting that at the output we get very slow and heavily supported code. We have our own 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 give rise to topics for discussion, I can only say that you need to be extremely careful with nesting, otherwise you can come to the situation that in order to redefine a particular style, you will need to resort to services
!important
, which is fraught with consequences. Also worth mentioning is the parent selector. It opens before us unprecedented opportunities that in pure CSS were not available to us. Only, again, I repeat, use it with caution, only when you 100% understand the logic of its work. An example .What else
All the advantages that preprocessors give us, and in particular Less - this is not the whole list. In fact - yummy is enough. And this applies not only to Less. Therefore, read the 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.