Less.js ленивая загрузка листа

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

less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);

может представлять собой возможный API? Cheers,

Колин

ОБНОВЛЕНИЕ 3 Дек 2010:

Я опробовал исправление Livingston Samuel в файле less.js, и, хотя он работает, он не распознает определения в уже загруженных таблицах стилей. Вот мои примеры файлов

а. index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simple</title>

  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
  <script src="/static/js/less-1.0.40.js"></script> 
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="abc"><div>Bingo</div></div>
</body>

<script>
console.log("loading new sheet");
less.loadStyleSheet("/static/less/style2.less", function() {
    console.log("Loaded!"); 
});

console.log("called");

</script>
</html>

б. style.less

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}

с. style2.less

#abc {
  background: @primary_color;
  .rounded(10px);

  div {
    margin: 2px;
    color: blue;
  }
}

Таким образом, вторая таблица стилей загружается лениво, но она имеет следующую ошибку синтаксического анализа в style2.less

". rounded undefined"

.rounded определяется style.less, и поскольку я не выгружал этот лист, я думал, что он должен быть доступен компилятору в текущей среде.

Другими словами, мы не хотим начинать новую или выгружать существующие определения, а строить уже загруженные стили. Спасибо,

Колин

Ответы

Ответ 1

Я не смог понять это с объяснениями выше, поэтому я предоставил свои собственные.

Итак, сначала. Загрузите свою таблицу стилей Less после загрузки страницы. Что-то вроде этого:

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

Великий. Теперь выберите свою таблицу стилей и вставьте ее в коллекцию листов, которые у Less.js уже есть. Он ожидает объект DOM, поэтому я использовал селектор jQuery.

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

Если кто-то знает лучший способ сделать это, пожалуйста, просветите меня. (Я должен был добавить [0], чтобы получить его на правильном.) Если вы сделаете это в консоли, он вернет номер. Это число, сколько листов меньше знает о том, что, надеюсь, он вернул номер один выше, чем то, что у вас уже было при загрузке страницы.

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

less.refresh();

И ты туда. Это должно было просто динамически загрузить таблицу стилей и сказать "Меньше" для ее компиляции. Надеюсь, это поможет.

Ответ 2

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

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

Может быть, это может быть показано путем расширения api.

Update:

Я создал разветвленную версию less.js @https://github.com/livingston/less.js

Используя эту версию, вы можете загрузить любую таблицу стилей с помощью метода less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

Я также сделал запрос на загрузку в фактическую библиотеку, надеюсь, они примут мои изменения.

Ответ 3

Только что принял ответ MatthewForr для моих собственных нужд:

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) {
    var $sheet = $('<link />', {
        href: fileName,
        rel: 'stylesheet/less',
        type: 'text/css'
    }).appendTo('head');
    less.sheets.push($sheet[0]);
});
less.refresh();

Ответ 4

В качестве альтернативы вы можете написать код на стороне сервера, который бы превратил вашу таблицу без лишних слов в .css на лету. От клиента вы загрузите его лениво, как если бы это была любая другая таблица стилей .css. Это подход, используемый http://www.dotlesscss.org/, хотя он может использоваться любым ароматом .less.

Возможно, не то, что вы ищете, но это вариант для некоторых, которые я думаю.

Ответ 5

Вы можете использовать эту легкую библиотеку для lazy load less/css и js files (отказ от ответственности: я автор).

Это так же просто, как:

lazy.load('/static/less/style.less');

Он также может получать обратный вызов, загружать еще несколько активов с зависимостями и заботиться о кеше.

Ответ 6

Все, что вам нужно сделать, это добавить новый тег script в DOM. Затем он будет загружен и выполнен.

function addScript (id, url)    //  Adds scripts to the DOM
{
    var s = document.createElement('script');
    s.id = id;
    if (url)    s.src=url;
    s.type='text/javascript';

    document.getElementsByTagName('head')[0].appendChild(s)
    return s;
}

Это то, что я использую на своем сайте, но я называю его синтаксическим разбором. Чтобы вы использовали его как ленивый загрузчик, он должен работать нормально, чтобы вы могли называть его onload или аналогичным образом.