Как пользоваться Less?

Question

[Sol-Mayers]

Всем доброй ночи. Сразу к делу.

В веб-разработке я новичок. Сегодня впервые хотел воспользоваться less. Провёл установку по инструкции, скачав скрипт с официального сайта в корневую папку проекта, создав сам файл с расширением less и прописав в хедере необходимые параметры - . По поводу правильности установки сомнений нет, так как пересмотрел много обучающих видео и статей и делал всё чётко по инструкции.

Проблема в том, что когда я создаю в файле less, допустим, переменную - @main-color: #e72f38; а затем в css какому-либо селектору прописываю в свойстве background-color: @main-color; то на странице ничего не меняется. То есть, css не видит изменений, прописанных в less.

Вопрос - как сделать так, что-бы свойства, заданные в less отображались в css? Если что, то всю работу прохожу в Adobe Dreamviewer.

Comments

[Rustam Bainazarov]

Используйте SASS, большинство разработчиков на нём сидит, у него больше возможностей.

Если будете владеть SASS, то и для LESS вам хватит вечера, чтобы разобраться, если понадобится.

Касательно вопроса. Любой препроцессор нужно компилировать в CSS, потому что браузеры понимают только CSS. На то в названии и «пре» есть.

[WapSter]

Я вот сегодня решил установить фаллоут 1, но он почему-то не запускается. Я уверен, что все сделал правильно по инструкции, пересмотрел кучу обучающих видео, даже гуглил. Автор вопроса, почему я не могу запустить игру?

[lamer350]

По всей видимости смотрели обучающие видео не внимательно.
CSS и не увидит никакие переменные в LESS. Чтобы использовать переменные вы должны писать css код внутри less, а далее конвертировать less в css и уже css прикреплять к документу. Тоисть у вас должен какой то скрипт сгенерировать сам css на основе вашего less если вы все правильно настроили, а какой скрипт будет генерить css уже зависит от вашего мануала (может быть JS, php, node и тд).

[Sol-Mayers]

lamer350, да, уже понял свою ошибку по поводу того, что код писать нужно в less. Только вот вопрос - а как его скомпилировать в css потом? Полагаю, что это должен делать скачанный с официального сайта less скрипт less.js. Так как заставить этот скрипт работать?

[Денис]

Sol-Mayers, можешь заюзать коалу для этого https://youtu.be/Up2HeUu2q50 если не хочешь со сборщиками возиться

[Sol-Mayers]

Денис, спасибо, посмотрю вечером. А как же через less.js делать?

[lamer350]

Sol-Mayers, на официальном сайте есть же и документация, посмотрите. В 2х предложениях это не описать.

[Кирилл Несмеянов]

Если требуются только переменные, то они есть и так в CSS. Less в данном случае для этих целей давно не актуален

Answer 1

[Антон Шаманов]

1. less переменные можно применять только в less файле
2. в html файле нужно подключать не less файл, а css скомпилированный из less. у дримвивера должен быть подобный функционал (или плагин), если что используй koala-app.com - программа простая, на русском и компилирует css на лету.
3. если тебе ничего кроме переменных в less не нужно, то на этапе разработки можно пользоваться css переменными