Parse LESS на стороне клиента - PullRequest
Новая
       16

Parse LESS на стороне клиента

5 голосов
/ 17 марта 2012

Могу ли я проанализировать клиентскую часть LESS и вернуть результаты?

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

Я не хочу устанавливать node.js и тому подобное, я хочу решение на стороне клиента.

Ответы [ 3 ]

11 голосов
/ 17 марта 2012

Взгляд на источник less.js вызывает объект Parser. Предполагая, что less.js включено в страницу: 

var data = "@colour: red; #example { background-color: @colour; }",
    parser = new less.Parser({});

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here...
    // e.g.:
    console.log( root.toCSS() ); 
});

выведет на консоль следующее: 

#example {
  background-color: #ff0000;
}

Конструктор для less.Parser на самом деле принимает ряд настроек, и я недостаточно понимаю внутренние функции LESS, чтобы сказать, что может быть полезно передать (хотя они все необязательны, поэтому для передачи не нужно просто использовать значения по умолчанию) ,

Метод Parser.parse принимает два параметра: строку, содержащую файл LESS, и обратный вызов, который обрабатывает проанализированные данные. Обратный вызов принимает до двух параметров: объект ошибки (error) и объект, представляющий проанализированный LESS (root). root не передается, если произошла фатальная ошибка, и error будет null, если ошибки не было.

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

1 голос
/ 04 ноября 2017

Вот рабочий пример: https://jsfiddle.net/y0oss091/1/

less.render("p{color: #ff66ff}")
    .then(function(output) {
        console.log(output.css)
    },
  function(error){});

Меньше загружается из CDN.

Существует много ресурсов.
Однако я не уверениспользование на стороне клиента проще, чем установка npm и узла.

0 голосов
/ 20 апреля 2014

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

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

// I too have no idea what to pass to less.Parser
// but none of them seemed very useful for this
// reading through the source
var parser = new less.Parser( {} ),
    toparse = '.foo {color: red;}';

try {
    parser.parse( function ( error, root ) {
        var css = root.toCSS();
        console.log( css );
    } );
} catch ( e ) {
    // if we hit a 404 when importing a less file
    // this is only thrown at the end of all the imports
    // rather than as soon as it find one broken @import
    if ( e.name === 'TypeError' && e.message === "Cannot call method 'toCSS' of undefined" ) {
        // handle typeerror here

    // if there's a parse error
    // assuming your original less file is just some @imports
    // this will also tell you which file contains the error
    } else if ( e.line ) {
        // the url of the imported file
        console.log( e.filename );

        // the line containing the error
        console.log( e.line );

        // this is a 3 item array containing the line with the error
        // +/- 1 line either side
        // e.extract[1] will be your error
        console.log( e.extract );

        // this is the error message
        console.log( e.message );
    } else {
        // it broke some other way
        // I haven't had this happen to me yet
        // so you'll have to figure it out for yourself ;)
    }
}

В качестве примера того, где это может быть полезно, мое приложение добавляет поддержку less для mediawiki , где я не могу получить доступ к чему-либо на стороне сервера, но могу получить доступ к файлам css и js сайта.Я могу сам разобрать less и заменить существующий css на только что проанализированный less, что означает, что я единственный, кому нужен js, чтобы он работал:)

...