Чи є спосіб компілювати менше файлів у CSS (так що кожен браузер не повинен)?

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

Крім того, це ображає інженера в мені, щоб змусити кожен браузер "компілювати" цей файл менше .css, коли ми могли просто "компілювати" його кожен раз, коли ми його змінюємо.

Так. Ви можете використовувати додаток, який автоматично копіює менші файли до CSS на вашій розроблювальній машині під час кодування. Потім просто завантажте згенерований CSS-файл на свій сервер, коли закінчите розробку.

• Хруст! для Windows та Mac
• WinLess для Windows
• CodeKit для Mac

Я використовую SimpLESS - перетягування, падіння, зроблено.

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

 $ lessc styles.less > styles.css

Але я думаю, що більшість людей просто використовують команду lessc -wабо lessc --watchкоманду, щоб автоматично перекомпілювати таблицю стилів CSS кожного разу, коли файл МЕНШЕ оновлюється. Ви також можете зменшити розмір CSS, наприклад lessc -w -x.

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

менше розміщено в /bin/lessc. Це, звичайно, бінарний * nix (також повинен працювати для Mac), але є двійковий файл Windows ( lessc.exe ) на основі бездоганних, який є ще одним компілятором Windows LESS.

Оновлення: використовуйте less-watchдля автоматичного компіляції.

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

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

Існує ряд варіантів компіляції МЕНШЕ в CSS на сервері, і той, який ви обрали, ймовірно, залежатиме від того, що ви використовуєте для решти сайту.

• Якщо ви використовуєте node.js, оригінальний lesscss зробить роботу.
• Якщо ви використовуєте PHP, менше php . Він має трохи сміття API, коли справа доходить до передачі змінних з PHP, але це робить роботу.
• Якщо ви використовуєте Ruby, SASS не менший, але настільки схожий, що коли я перейшов з використання SASS (персонального проекту) на LESS (проект PHP на роботі), я не помітив жодних відмінностей, крім розширення файлу. У ньому також є корисна бібліотека міксинів - КОМПАС . Я не намагався їх використовувати з МЕНШЕ, але сподіваюся, що вони спрацюють. (Мабуть, МЕНШЕ спочатку був Рубі, тож, мабуть, десь теж плавав старий компілятор).
• Якщо ви використовуєте ASP.Net, немає .less . Я не користувався цим, тому не знаю, наскільки добре він працює.
• Якщо ви використовуєте Java, lesscss4j завершує компіляцію з оригінальним вбудованим сценарієм середовища Rhino LESS та Java 6.
• Якщо ви використовуєте Perl, у CPAN є модуль LESSp .