LESS - 클라이언트 측 변수 설정

간단한 CSS 그리드 솔루션 (http://simplegrid.info/)의 LESS (http://lesscss.org/) 버전을 만들었습니다. 이제는 LESS (lessc)의 서버 스크립트로 내 자신의 그리드 크기를 롤백 할 수 있습니다. . 나를 위해 데모 목적을 위해LESS - 클라이언트 측 변수 설정

나는 텍스트 상자에 CSS를 격자의 크기를 넣을 수 있고, 그리드가 동적으로 변경 할 경우, HTML 페이지를 생성하고자하는 데모의 시작은 여기에 있습니다 :.

http://jsfiddle.net/8QHNc/

따라서 을 <style rel="stylesheet" type="text/less" > 섹션이 변수를 덜 인터프리터에 전달하고 싶습니다.

클라이언트 측 사용량이 적 으면이 작업을 수행 할 수 있습니까? 전역 변수를 정의하거나 less.js에 매개 변수로 전달할 수 있습니까?

내가 LESS의 사용없이이 작업을 수행 할 수 있다는 것을 알고있다 (바람직하게는 jQuery를 오 STH에..) - 파서가 걸리는 경우 그러나 이미 있기 때문에 내가 생각 ...

출처

2012-01-03 madflow

는 나도 몰라 모든 인수,하지만 왜 당신은 내장 된 자바 스크립트 평가를 사용 거부, 예 : 다음을 추가하십시오 :

@layoutwidth: `document.getElementById("inputLayoutWidth") + "px"`;

덜 스타일 시트에 추가하십시오. 당신이 제안 또는, jQuery를 사용하여 :

@layoutwidth: `$("#inputLayoutWidth").val() + "px"`;

을

<input type="text" id="inputLayoutWidth" value="720" />

같은 입력 필드를 사용하여 입력 필드가 변경 될 때마다 구문 분석 호출 동안.

출처

2012-01-13 14:47:02 burnedikt

답변 해 주셔서 감사합니다. 거부하지 않습니다 ... 실제로 JS 평가판에서 빌드를 수행했습니다. 내가 직면 한 문제는 무시 된 값 ... 참조 : http://jsfiddle.net/PmDD3/. 100px 값은 항상 ""(으)로 이스케이프 처리됩니다. Firebug는 다음을 보여줍니다 : .box : {content : "100px";} 후에 .box 요소의 너비는 항상 무시되거나 브라우저에 "유효하지"않습니다. – madflow

늦게 재생하여 죄송합니다. 사용 중입니다. "~"값을 직접 출력하는 것을 잊어 버렸습니다. 이제는 고정되어 있으며 입력 상자에서 정확히 지정된 너비를 사용합니다. [link] (http://jsfiddle.net/PmDD3/8/)를 참조하십시오. 그러나 전체 스크립트 페이지를 다시로드하지 않고 적은 스크립트 클라이언트를 강제로 재 작성하는 방법을 모르겠습니다. – burnedikt

답장을 보내 주셔서 감사합니다! 그것은 나를 위해 작동 ...! – madflow

보다 적은 CSS의 3.x 버전을 사용하는 경우 JavaScript 코드에서도 설정할 수 있습니다.

less.modifyVars({ 
    '@buttonFace': '#5B83AD', 
    '@buttonText': '#D9EEF2' 
});

이 방법이 이전 버전의 더 적은 버전에도 있는지 여부는 알 수 없습니다.

출처

2016-12-06 09:48:16

LESS - 클라이언트 측 변수 설정

답변

관련 문제