How to put Less into practice?

Question

css

Maybe someone has seen a video tutorial or an article about Less, where, using the example of project layout, it is shown how this preprocessor can be used as efficiently as possible.
1. How to effectively apply impurities, where they are needed and where they are not;
2. The use of cycles on the example of creating a layout for a site;
3. Organization of the code, is it worth splitting less into files (blocks);
Well, etc.
All this will help to write the most optimized code,

Answer 1

if you are just starting to learn anyway, switch to the sass side) and you will immediately find a lot of guides and video tutorials and everything else)

Answer 2

By the way, recently he began to take an interest.
Here this resource can help: sass-scss.ru
And here is this one: leafo.net/scssphp
Specifically, you can use it and even write your own wrapper. Or use ready-made modules based on it, for example, in wordpress:
https://ru.wordpress.org/plugins/wp-scss/
or Bitrix:
marketplace.1c-bitrix.ru/solutions/olegpro.csscompiler
Everything is intuitively clear there. The compiler works well. The rest can be gleaned from sass-scss.ru

Answer 3

I found a good video review about the Less preprocessor. The author speaks fluently, but shows many interesting nuances.
www.youtube.com/playlist?list=PLX2yKxdx7ck-Ex9XFu8...

Answer 4

How to apply LESS is up to you, because there is no "optimized code". Everyone does what is faster and more convenient for him. IMHO, it is much more important to document the code, and how it will be written is not so important.

Answer 5

1. It is very convenient to use them when the property has a lot of prefixes for different browsers, such as transition, border-radius, transform, etc. Example:

.transition (@option: all, @time: 0.15s, @type: ease-in-out) {
  -webkit-transition: @option @time @type;
  -moz-transition: @option @time @type;
  -o-transition: @option @time @type;
  transition: @option @time @type;
}
.block {
  .transition;
}
.block2 {
  .transition(@option: height);
}

It is also convenient to use mixins for repeating pieces of code.
2. See this article for more details: best-web-creation.com/articles/view/id/less-condit...
3. Depends on the size of your less file. If it becomes too large, then at least you can output global variables and mixins to separate files, the rest is up to you