CSS 변수를 편집하기위한 자바 스크립트 라이브러리?

Question

내가 LESS를 사용하고 변수를 사용하는 웹 사이트를 가지고 있다고 가정합니다. 최종 사용자에게 변수를 변경할 수있는 기능을 제공하는 라이브러리 또는 기타 것이 있는지 궁금합니다. 예를 들어, 클래스의 배경색이 변수에 지정된 경우 드롭 다운 메뉴에서 편집 할 수 있어야합니다. 비슷한 것을 구현하려고하기 때문에 기존의 솔루션에 대해 궁금해하고있었습니다.

Answer 1

저는 최근에이 문제를 자주 접했고 여러 가지를 시도한 후에 결국 해결책이 부족해졌으며 멋진 JavaScript API를 가진 Stylus으로 이동했습니다. 어떤 경우

이 내가 자바 스크립트에서 LESS 변수를 얻기 위해 지금 작업 한 것입니다 :

var getLessVar = function (name, prop) { 
    var value = $('<div class="' + name + '"></div>').hide().appendTo('body').css(prop) 
    $('.' + name).remove() 
    return /^\d+/.test(value) ? +value : value 
} 

그것은 해키하지만 작동합니다. 덜 작성한 클래스를 만들고 JS에 넣고 자하는 변수를 속성으로 지정하십시오 (예 : width). 전송할 데이터의 유형 (숫자, 색상 ...)에 따라 다른 속성이 될 수 있습니다.

@myvar: 30px + @foo; 
.myvar { width: @myvar } 

그런 다음 JS에서 당신은 다음과 같이 그 릴 '스크립트 변수를 잡아 : 그것은 데이터를 검색하기 위해 보이지 않는 요소를 만들지 만 작동으로

이

var myvar = getLessVar('myvar', 'width') 

이 성능에 좋은하지 않습니다. JS는 더 복잡하다에서

---

변수를 설정하려면,하지만 당신은 항상 당신의 variables.less을 읽을 수 LessPHP과 몇 가지 기본적인 파서와 함께 몇 가지 AJAX 마법을 할 수 있습니다.

하지만 더 많은 힘이 필요하면 Stylus로 이동하십시오.

Answer 2

나는이 당신이 https://stackoverflow.com/a/12487636/347508

이

Answer 3

modifyVars이 런에서 LESS 변수의 수정을 할 수 있습니다 (내가 한 장소에 보관하는 답을 통해 붙여 & 복사 아니에요) 원하는 것을 생각 시각. 새 값으로 호출되면 LESS 파일은 다시로드하지 않고 다시 컴파일됩니다. 간단한 기본 사용법 : 솔루션에 대한

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