변수를 기반으로 함수의 할당량을 줄입니다.

저는 클라이언트가 최소 수의 변수를 사용하여 사이트의 색 구성표를 업데이트 할 수 있도록하기 위해 '테마 엔진'을 개발하려고합니다. 현재 우리는 디폴트 세트를 할당하고있는 변수 파일을 가지고 있으며, 우리가 lighten과 darken 함수를 많이 사용하는 사용자 입력의 수를 줄이기 위해 예를 들어.변수를 기반으로 함수의 할당량을 줄입니다.

// snippet 1 
@grayLight: #999999; 
@grayLighter: darken(@grayLight, 10%);

밝기/어둡게 기능을 변수로 할당 할 수있는 방법이 있습니까?

// snippet 2 (does not work) 
@contrastVerb: darken; 
@linkColorHover: @contrastVerb(@linkColor, 10%);//#FFA500;

내가 예를 들어, 함수 요청을 호출하는 자바 스크립트 대괄호 표기법을 사용하여 시도했다 :이 방법은 우리 만 톤 대비 (다크/라이트 또는 빛/어둠)를 지정해야

// snippet 4 
@tone: light; 
.linkColor(light, @color){ 
    color: lighten(@color, 10%); 
} 
.linkColor(dark, @color){ 
    color: darken(@color, 10%); 
} 

.linkColor(@tone, #f17900);

그러나 4 의지가 훨씬 더 자세한 조각 2 또는 3보다 니펫을, 여분의 많은 코드가 생성되는 발생합니다 :

// snippet 3 (does not work) 
@linkColorHover: `window[@contrastVerb]`(@linkColor, 10%);//#FFA500;

의 옵션은 패턴 매칭이다.

미리 감사드립니다.

출처

2012-09-13 mummybot

<body>에 클래스를 추가하고 mixin을 사용하여 CSS 규칙을 만들어 사이트의 내용을 변경하십시오.

<body class="section1"></body>

LESS 데모 :

.color-mixin (@color) { 
    color: @color; 
    .foo{ 
     background-color: darken(@color, 10%); 
    } 
    a { 
     &:hover{ 
      background-color: lighten(@color, 30%); 
     } 
    } 
} 

.section1 { 
    .color-mixin(red); 
} 
.section2 { 
    .color-mixin(blue); 
}

CSS 결과 :

.section1 { 
    color: #ff0000; 
} 
.section1 .foo { 
    background-color: #cc0000; 
} 
.section1 a:hover { 
    background-color: #ff9999; 
} 
.section2 { 
    color: #0000ff; 
} 
.section2 .foo { 
    background-color: #0000cc; 
} 
.section2 a:hover { 
    background-color: #9999ff; 
}

출처

2012-09-13 20:49:18

좋습니다. 불행히도 각 '테마'는 동일한 변수로 다시 스킨 된 웹 사이트의 전체 CSS입니다.사용자가 테마를 전환하면 완전히 새로운 수천 줄의 CSS 파일이 생성됩니다. 10 개 이상의 테마가 될 가능성이 있기 때문에 스타일을 전환하는 클래스의 클래스를 사용하는 것이 가능하지는 않습니다. – mummybot

이 경우 솔루션은 LESS와 아무런 관련이 없습니다. AJAX가 새로운 CSS 파일을로드하는 것이 좋습니다. –

맞습니다. 필요할 때마다 CSS를 전환 할 것입니다. 그러나 필자의 원래 질문은 요소 톤을 변경할 때 명암 스위치를 생성하기 위해 패턴 매칭보다 간결한 방법이 있습니까? – mummybot

나는 사용자가 테마를 생성에 관한 비슷한 상황에있어 그리고 내가 함께 왔어요 몇 가지 기본 색상에서 생성 된 색상 구성표를 관리하는 데 도움이되는 LESS 믹스 다음 :

//LESS 1.3.3 
.color (@color, @amount: 100) { 
     color: contrast(@color, darken(@color, lightness(@color) * (@amount/100)), lighten(@color, (100 - lightness(@color)) * (@amount/100)), 0.5); 
    }

상기 코드는 I 정상적으로 라임 텍스트 2에서 사용 LESS 버전 다른 콘트라스트 기능을 갖는다 1.3.3 적은 작성된! 이 예상 된 결과의 시도를 제공하지 않는 경우 : - (100)을 포함

.color (@color, @amount: 100) { 
    color: contrast(@color, lighten(@color, (100 - lightness(@color)) * (@amount/100)), darken(@color, lightness(@color) * (@amount/100)), 50%); 
}

이 믹스 인은 입력 색상에 따라 대비되는 색상과 0 사이의 양을 생성하여 사용할 수 있습니다. 100 = 완전한 콘트라스트 (즉, 블랙 또는 화이트); 0 = 대조 없음 (즉, 입력 색상). 예 : LESS

@c: #4f2634; 
.c0 {.color(@c, 0)} 
.c20 {.color(@c, 20)} 
.c50 {.color(@c, 50)} 
.c80 {.color(@c, 80)} 
.c100 {.color(@c, 100)}

이 예제는 분명히 그렇게 텍스트 색상을 생성하는 배경 색상을 부여 할 때 유용하지만, 같은 생각이 재 작정 될 수

.c0 {color: #4f2634;} 
.c20 {color: #844057;} 
.c50 {color: #bf7a92;} 
.c80 {color: #e5cad3;} 
.c100 {color: #ffffff;}

CSS 테두리 색 등 희망이 도움이됩니다.

출처

2013-02-06 15:43:50

변수를 기반으로 함수의 할당량을 줄입니다.

답변

관련 문제