Есть ли способ скомпилировать файлы LESS в CSS (чтобы это не требовалось каждому браузеру)?

20

Я рассматриваю возможность использования LESS, но меня беспокоит мысль о том, что в браузере отключен JavaScript и мой CSS не читается (а сайт выглядит ужасно).

Кроме того, меня оскорбляет инженер, заставляющий каждый браузер «компилировать» этот файл Less в .css, когда мы можем просто «компилировать» его один раз при каждом его изменении.

Клей Николс
источник
1
@ Anonymous- Если вы посмотрите LESS, вам также стоит взглянуть на SASS и COMPASS.
Сорси
Стилус и OOCSS также являются похожими продуктами.
Lèse Majesté
1
Я опубликовал соответствующий ответ, объясняющий, как автоматически настроить компиляцию LESS на сервере: webmasters.stackexchange.com/questions/38386/…
romaninsh
3
Я не знал, что кто-то компилирует LESS в браузерах!
Кенни Эвитт

Ответы:

17

Да. Вы можете использовать приложение, которое автоматически компилирует файлы LESS в CSS на вашем компьютере для разработки при кодировании. Затем просто загрузите сгенерированный файл CSS на свой сервер, когда закончите разработку.

Ник
источник
10

LESS поставляется с двоичным файлом (lessc), который позволяет вам предварительно скомпилировать ваши файлы .less. Вы используете его как таковой:

 $ lessc styles.less > styles.css

Но я думаю, что большинство людей просто используют команду lessc -wor lessc --watchдля автоматической перекомпиляции таблицы стилей CSS при каждом обновлении файла LESS. Вы также можете уменьшить CSS, например lessc -w -x.

Редактировать: просто чтобы уточнить, lessc поставляется с установкой на стороне сервера (то есть, когда вы устанавливаете less через менеджер пакетов node.js). Но вы можете скачать его вручную с GitHub .

Лессек находится по адресу /bin/lessc. Это, конечно , в * NIX двоичном (также должны работать на Mac), но это бинарное для Windows ( lessc.exe ) на основе Dotless, что является еще одним Windows , МЕНЬШЕ компилятор.

Обновление: используйте less-watchдля автоматической компиляции.

В качестве альтернативы, многие разработчики в настоящее время используют такие исполнители, как gruntавтоматизация сборки (компиляция, минимизация, тестирование и т. Д.). Используя grunt-contrib-watch, grunt-contrib-lessи grunt-contrib-livereloadвы действительно можете оптимизировать рабочий процесс разработки.

Например, если вы используете yoдля создания своего нового веб-проекта, он предварительно настроен для просмотра ваших файлов LESS / CSS / JS / HTML на предмет изменений и при необходимости перекомпилирует необходимые части вашего проекта. Просто запустите grunt serve, и вы готовы писать код, не беспокоясь о том, чтобы вручную скомпилировать (LESS / SASS / CoffeeScript) / минимизировать / объединить ваш код или обновить браузер вручную, как пещерный человек ...

Lèse Majesté
источник
1
Я не уверен, какую версию вы используете. В последней версии 1.3.0 нет функции --watch. Запрос на получение функции --watch был отклонен 9 месяцев назад. github.com/cloudhead/less.js/pull/246
Жерар Рош
@BullfrogBlues: Извините, это было из старого Lessc на основе Ruby.
Lèse Majesté
Примечание: "less-watch переименован в fs-change. Используйте вместо этого:. npm install -g fs-change"
Эндрю Лотт
6

Существует несколько вариантов компиляции LESS в CSS на сервере, и тот, который вы выберете, вероятно, будет зависеть от того, что вы используете для остальной части сайта.

  • Если вы используете node.js, оригинальное lesscss сделает эту работу.
  • Если вы используете PHP, lessphp . Он имеет немного мусор API, когда дело доходит до передачи переменных из PHP, но он делает свою работу.
  • Если вы используете Ruby, SASS не LESS, но настолько похож, что когда я переключился с использования SASS (персональный проект) на LESS (проект PHP на работе), я не заметил никаких отличий, кроме расширения файла. Также есть полезная библиотека миксинов - КОМПАС . Я не пробовал использовать их с LESS, но я ожидаю, что они сработают. (По-видимому, LESS изначально был Ruby, так что, вероятно, где-то где-то есть старый компилятор).
  • Если вы используете ASP.Net, есть .less . Я не использовал этот, поэтому я не знаю, насколько хорошо он работает.
  • Если вы используете Java, lesscss4j завершает компиляцию с оригинальной LESS и встроенной в Java 6 средой сценариев Rhino.
  • Если вы используете Perl, в CPAN есть модуль LESSp .
Питер Тейлор
источник
2
Там является рубин компилятор , который поставляется со старым МЕНЬШЕ Рубин драгоценный камень , но он не обновляется больше так много новых функций не будет работать на нем. Таким образом, если вы используете Ruby, я бы порекомендовал просто использовать lesscдвоичный компилятор, основанный на последней версии less.js.
Lèse Majesté
@ Lèsemajesté, я бы просто пошел с SASS, но я не хотел, чтобы меня обвиняли в умышленном игнорировании возможности компиляции LESS в Ruby.
Питер Тейлор
1
Да, я думаю, что SASS будет лучшим вариантом для Ruby, поскольку гем LESS устарел с момента перехода на JS.
Lèse Majesté