Как создать переменную путя к изображениям и прописывать её в классы?

Question

[Erling]

При верстке макета в less часто использую background-image (или просто background). Дело в том, что при переносе или создании шаблона многие пути меняются (разом на весь проект) и хочется как-то задать глобально и один раз переменную, которую буду подставить в background.

Как это делается в LESS? Пытался сделать, даже смотрел документацию, но при компиляции (через Prepros) получаю ошибки.

Итак:
- сейчас: background-image: url(../img/header.jpg);

- надо:
@path_to_template: /template/test
background-image: url(@path_to_template/img/header.jpg);

Answer 1

[Михаил Чирский]

Sass лучше Less советую изучить его, различия не большие, из + не нужно ставить {} и ; в конце
пишите 1 большое структуировано дерево:

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

думаю суть ясна, а по поводу компилятора, я бы посоветовал Gulp, Grunt, они очень удобные + есть куча плюшек, включая min файлы? css, js, а также работа с изображениями. под ретину и т д

Comments

[Erling]

Михаил Чирский спасибо за ваш комментарий Михаил, но вопрос ведь про переменную, а не что лучше SASS или LESS.

[Михаил Чирский]

Erling: я ответил, Gulp, Grunt, с Prepros не работал, ну склоняюсь, что либо вы ему не настроил как надо, либо еще может быть причина какая, потому, что написали вы верно, на 1 взгляд не бросается ошибки в синтаксисе

Answer 2

[Лариса]

@path-img: "/images";

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