LESS (язык динамических таблиц стилей) и загрузчики ресурсов - PullRequest
1 голос
/ 23 февраля 2012

В настоящее время я смотрю на переход от использования CSS к МЕНЬШЕ в моем текущем проекте.Прежде чем перейти к этому вопросу, необходимо упомянуть несколько вещей:

1) Проект является чисто клиентским (Html ​​/ Js / Css), поэтому для веб-сайта нет серверного компонента (хотя есть веб-сервис).он вызывает через CORS) 2) Я загружаю почти все через инфраструктуру загрузки ресурсов, в настоящее время я использую yepnope

Так что, учитывая вышеизложенное, мне нужно иметь возможность обрабатывать стили LESS для обработки на стороне клиента, но так как яиспользуя загрузчик ресурсов и больше css / less можно было бы загрузить после первоначальной загрузки страницы Мне было интересно, если:

1) Меньше ли работает с загрузчиками контента при использовании обработки на стороне клиента?Как говорится:

Client-side usage

Link your .less stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the <head> element of your page, like so:

<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.

Я думаю, что может быть в состоянии сказать yepnope, как обрабатывать меньше файлов, и дать им необходимые атрибуты элемента.Если я смогу предоставить меньше ресурсов, введенных раньше, чем меньше javascript, то все будет в порядке?

2) Есть ли какой-нибудь ручной способ указать, что обрабатывать в javascript?

Это будет охватыватьВ случае, когда все загружено для текущей страницы, пользователь нажимает кнопку, которая динамически загружает новый шаблон, отображаемый на текущей странице, для этого может потребоваться новые меньше ресурсов для загрузки, но тем меньшеФайл .js уже включен.

Надеюсь, что вышеизложенное даст вам некоторый контекст относительно того, что я пытаюсь сделать, и каковы 2 вопроса.

1 Ответ

1 голос
/ 23 февраля 2012

Да, вы можете.

Чтение этого поста Динамически загружать правила less.js и немного его настраивать:

less.sheets.push(document.getElementById('new-style-1'));
// Add the new less file to the head of your document    
var newLessStylesheet = $("<link />").attr("id", "new-style-1").attr("href", "/stylesheets/style.less").attr("type", 'text/less');
$("head").append(newLessStylesheet);
// Have less refresh the stylesheets
less.refresh(true);

Вы также можете сгенерировать весь CSS в вашей среде разработки и поместить его в один файл. Есть много вариантов. Самый простой способ - использовать приложение. Вы можете использовать такие приложения, как http://incident57.com/less/ для Mac. Вы даже можете скомпилировать онлайн: найдите что-нибудь как "lessphp".

...