Как обнаружить и распечатать меняющиеся переменные МЕНЬШЕ

Я хочу создать простой скрипт, который меняет переменные LESS и печатать вывод CSS в div.

это мой HTML

<input type="text" id="choose-color" onchange="ModifyColorsInLess()">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>

Это мой JS

function writeCSS(){
  var lessCode = '';
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){
    if(xmlhttp.status === 200 && xmlhttp.readyState === 4){
      lessCode = xmlhttp.responseText;
      new(less.Parser)().parse(lessCode, function (e, tree) {
        document.getElementById('lesscode').innerHTML =   tree.toCSS().replace(/\n/g,"<br>");
      });

    }
  };
  xmlhttp.open("GET","css/styles.less",true);
  xmlhttp.send();
}

function ModifyColorsInLess() {
  less.modifyVars(
    {
      '@colore-body': $("#choose-color").val()
    }
  );
}

Скрипт правильно печатает код CSS, но если я вставлю новое значение цвета в input type="text" и вызову функцию writeCSS, он не распечатает мою переменную edit. Я думаю, что проблема в том, что "modifyvar" не изменяет файл "styles.less", поэтому при вызове функции writeCSS() не обнаруживает сделанные изменения. Есть ли способ распечатать CSS динамически обнаруживая изменения, сделанные с Modifyvar?

Источник

1 ответ

Решение

update Когда вы разрешаете скомпилированные стили непосредственно применяться на вашей странице, вы можете просто вызвать `modifyVars следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Less Example</title>
<script>
less = {
    env: "development"
}    
</script>
<link rel="stylesheet/less" type="text/css" href="t.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
<script>

    function writeCSS(){
        less.modifyVars({
          'colore-body': document.getElementById('choose-color').value
        });  
   }        


</script>   
</head> 
<body>
<input type="text" id="choose-color">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
</body>
</html>

Демо: http://plnkr.co/14MIt4gGCrMyXjgwCsoc

конец обновления

На основе Как показать скомпилированный CSS из файла.less в браузере? Как динамически обновлять переменные в файле.less с помощью AngularJS и Less: опция Passing при использовании программно (через API) (вы также должны прочитать: http://lesscss.org/usage/), вы должны иметь возможность используйте код, подобный показанному ниже:

<!DOCTYPE html>
<html>
<head>
<title>Less Example</title>
<script>
less = {
    env: "development"
}    
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
<script>

    function writeCSS(){
    var lessCode = '';
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
        var options = {}
        options['modifyVars'] = {'colore-body' : document.getElementById('choose-color').value}     
        lessCode = xmlhttp.responseText;
        less.render(lessCode, options, function (error, output) {
        if(!error) {
        document.getElementById('lesscode').innerHTML = output.css;
        }
        else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
        });

      }
    };
    xmlhttp.open("GET","styles.less",true);
    xmlhttp.send();
    }
</script>   
</head> 
<body>
<input type="text" id="choose-color">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
</body>
</html>

демо: http://plnkr.co/YbdtOwOeQPC1k9Vq4ZBv

И, наконец, на основе Force Cache-Control: без кэширования в Chrome через XMLHttpRequest при перезагрузке F5 вы можете предотвратить кеширование исходного файла с помощью следующего кода:

xmlhttp.open("GET","t.less?_=" + new Date().getTime(),true);

В приведенном выше env: "development" настройка предотвращает кеширование ваших исходных файлов. Чтобы очистить кеш в противном случае, вы должны позвонить less.refresh(true) до вашего звонка.

У меня есть еще одна маленькая проблема, если в моем файле меньшего размера есть ссылка на другой файл меньшего размера, как этот (@import "another.less") скрипт не работает.

Удостоверься что another.less в приведенном выше находится в той же папке, что и ваш styles.less файл. Обратите внимание, что импорт (при использовании less в браузере) также читается с XMLHttpRequest. Таким образом, ваши импортированные файлы должны быть доступны для чтения браузером, а их пути должны быть относительно styles.less файл. Также см. Http://lesscss.org/usage/#using-less-in-the-browser-relativeurls

Источник
Другие вопросы по тегам