LESS (язык динамических стилей) и загрузчики ресурсов

В настоящее время я рассматриваю переход от использования css к LESS в моем текущем проекте. Несколько вещей, о которых стоит упомянуть до того, как я доберусь до вопроса, являются:LESS (язык динамических стилей) и загрузчики ресурсов

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

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

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

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?

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

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

источник

2012-02-23 Grofit

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

Читая этот пост Load less.js rules dynamically и корректировки его немного:

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».

источник

2012-02-23 10:50:11 Jaap

Я знаю, что касается серверных решений, я просто хотел оценить вещи исключительно на стороне клиента, так как некоторые из назначенных переменных могут быть основаны на размере экрана и некоторой другой клиентской информации, которая просто не будет доступна на сервере. Однако, забыв, что я решил, что вы решили мою проблему :) – Grofit

Вы также можете пойти по медиа-запросам в своем CSS/менее, чтобы иметь стиль в зависимости от размера экрана. По ширине: http://www.w3.org/TR/css3-mediaqueries/#width Или по расположению: http://www.w3.org/TR/css3-mediaqueries/#height – Jaap

LESS (язык динамических стилей) и загрузчики ресурсов

ответ

Смежные вопросы