덜 클라이언트 쪽을 구문 분석

Question

덜 클라이언트 쪽을 구문 분석하고 결과를 반환 할 수 있습니까?

현재 문서에서 권장하는대로 사용하고 있습니다.이 파일은 적은 파일을 포함하고 나중에 더 적은 파서를 축소합니다. 원시 CSS를 반환하여 CSS 파일로 저장할 수 있기를 원합니다.

node.js 등을 설치하고 싶지 않습니다. 클라이언트 측 솔루션을 원합니다.

Answer 1

less.js source을 보면 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은 전달되지 않으며 오류가없는 경우 은 null이됩니다.

불행히도 오류 매개 변수의 속성에 대한 정보가 소스 here에 설정된 장소보다 더 정확하지 않습니다.

Answer 2

@ dbaupp의 대답은 대단히 도움이되었지만 오류 처리 방법이 그의 대답에 설명 된 방법을 찾지 못했습니다.

구문 분석 콜백 내에서 오류 매개 변수에 응답 할 수 없다는 의미로 오류 매개 변수에 전달되는 것이 아니라 클라이언트 측을 덜 구문 분석 할 때 오류가 발생하는 것으로 나타났습니다. 이 유용 할 수 있습니다 어디, 내 응용 프로그램이 난 아무것도 서버 측에 액세스 할 수 있지만 사이트의 CSS와 JS 파일에 액세스 할 수 이하로 mediawiki에 대한 지원을 추가의 예로서

// 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 ;) 
    } 
} 

. 나는 나 자신을 덜 구문 분석하고 여기에 :)

Answer 3

작업 작업 예이다하는 I가 활성화 JS 필요가있는 유일한 사람 새롭게 해석 적은 의미로 기존의 CSS를 대체 ​​할 수 https://jsfiddle.net/y0oss091/1/

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

적은 CDN에서로드됩니다.

많은 리소스가 있습니다.
그러나 클라이언트 측 사용이 npm 및 노드를 설치하는 것보다 쉽지는 않습니다.