Как показать скомпилированный CSS из файла.less в браузере?

Question

Каков наилучший способ показать полученный CSS из файлов, скомпилированных с less.js в клиенте. Другими словами, как я могу заполнить div полученным css?

Мне нужно отобразить результат на странице, есть ли способ сделать это?

Спасибо!

Answer 1

Обновить

Как уже указывалось в комментариях @ertrzyiks, вы должны заменить less.parse на less.render для Less v 2.x:

var lessCode = '';
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    var options = {}
    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","important.less",true);
xmlhttp.send();

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

Но так как Less v2:

В браузере less.pageLoadFinished будет обещанием, разрешенным, когда less завершит свою первоначальную обработку. less.refresh и less.modifyVars также возвращают обещания.

Когда вы компилируете filename.less скомпилированный код CSS был введен в style пометить с idless:filename, чтобы получить скомпилированный код CSS, вы также можете использовать:

less.pageLoadFinished.then(
    function() {
        console.log(document.getElementById('less:filename').innerHTML);
    }
); 

Обратите внимание, что в последнем примере также применяется скомпилированный код CSS на странице.

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

Я ожидал, что возможно выполнить что-то вроде следующего:

    <link rel="stylesheet/less" type="text/css" href="important.less">
    <script src="less-1.7.3.js" type="text/javascript"></script>

    <script>
    css = less.tree.toCSS();
    console.log(css);
    </script>

к сожалению, это не работает, но вы можете использовать следующий код, чтобы получить то, что вы хотите:

    <script src="less-1.7.3.js" type="text/javascript"></script>
    <script>
    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","important.less",true);
    xmlhttp.send();
    </script>

С в body раздел вашего HTML:

<div id="lesscode"></div>

См. Также: Объединение двух файлов.less в один и Как открыть файл на локальном диске с помощью Javascript?

Answer 2

Я просто использую элемент проверки Chrome.

Щелкните правой кнопкой мыши на элементе CSS, который вы ищете, щелкните правой кнопкой мыши и выберите элемент Inspect. Справа вы найдете скомпилированный CSS в стилях. Надеюсь, поможет

Answer 3

У вас есть два варианта сделать это, Internet Explorer или Firefox.

Давайте начнем с Firefox. Если вы устанавливаете панель инструментов веб-разработчика, вы получаете пункт меню с надписью CSS. Нажав на это, вы получите несколько вариантов, и если вы выберете View CSS, вы попадете на новую вкладку, которая показывает вам все стили страницы, сгруппированные по их расположению, и вы должны увидеть раздел с сгенерированным CSS Меньше и динамически применяется к элементам.

В IE также есть опция веб-разработчика, и если вы используете панель инструментов для проверки элемента, вы можете использовать комбинацию клавиш Ctrl + T, которая вызовет исходный код страницы с вычисленными стилями.

Решение Firefox лучше, так как вы можете точно видеть, какие стили были предоставлены LESS, тогда как IE просто объединяет все это вместе.

Существует третий вариант, и это компилировать серверную часть CSS!