How to create an image path variable and assign it to classes?

Question

css

When laying out a layout in less, I often use background-image (or just background). The fact is that when transferring or creating a template, many paths change (at once for the entire project) and I want to somehow set globally and once a variable that I will substitute in background.
How is this done in LESS? I tried to do it, even looked at the documentation, but when compiling (via Prepros) I get errors.
So:
- now: background-image: url(../img/header.jpg);
- need:
@path_to_template: /template/test
background-image: url( @path_to_template /img/header.jpg);

Answer 1

Sass is better than Less, I advise you to study it, the differences are not big, you don’t need to put {} and ; at the end
write 1 big structured tree:

.block
  font-size: 14px
  .block-head
    color: #fff

I think the essence is clear, but about the compiler, I would advise Gulp, Grunt, they are very convenient + there are a lot of goodies, including min files? css, js, as well as working with images. under the retina, etc.

Answer 2

@path-img: "/images";

background-image: url("@{path-img}/name.gif");