2012-08-07 4 views
1

내 적은 코드는 다음과 같은 것입니다 컨텍스트/스코프 :적은 변수는

body { 
    @var: white; 

    &.blue { @var: blue; } 
    &.red { @var: red; } 
    &.abc { @var: #badass; } 

    background-color: @var; 
} 

내가 희망의 body 클래스 .abc이 클래스가있는 경우 변수 @var의 값이 #badass 인이있는 경우 .blue 값은 blue입니다. 그러나 그 일은 일어나지 않습니다. 변수의 값은 유적 클래스와 독립적으로 변경되지 않습니다. 다음 코드가 작동

.bg(@color){ 
    background-color:@color; 
} 

과 :

+0

body 태그에 어떤 클래스를 추가해야하는지 알 수 있습니까? – Amberlamps

+1

당신이하려는 것은 불가능합니다! LESS가있는 CSS 파일을 만듭니다. 그건 당신의 HTML과 관련이 없습니다. 귀하의 마크에서 귀하의 신체 태그에 할당 한 클래스를 적게 어떻게 알 수 있습니까? – Amberlamps

+0

귀하의 의견에 혼란스러워합니다. CSS/LESS는 내가 내 몸에 추가 한 수업을 알고있다. 그건 내 문제가 아니다. –

답변

2

당신은 그것을위한 파라 메트릭 믹스 인을 만들 필요가

body { 
    .bg("white"); 

    &.blue{ .bg("blue"); } 
    &.red { .bg("red"); } 
    &.abc { .bg(#bada55); } 

} 

당신이 있기 때문에 당신이 작동하지 않는 일을 변수를 재 할당 - 완벽하게 작동하지만 새 값을 클래스에 쓰지 않습니다. (LESS가 새로운 규칙을 만들었다면 변수를 재 할당 할 때마다 전혀 의미가 없습니다.) 또한 다른 프로그래밍 언어와 마찬가지로 LESS에 범위가 있으므로 background-color: @var;에 도달하면 @var에 값이 white으로 할당됩니다. 그에 따라 규칙을 만듭니다. 다음은 작동합니다 (물론 이해가되지 않습니다).

body { 
    @var: white; 

    &.blue{ @var: blue; background-color: @var;} 
    &.red { @var: red;  background-color: @var;} 
    &.abc { @var: #bada55; background-color: @var;} 
    background-color: @var; 
} 
+0

나는이 일을하고 있지만, 나는 위의 코드를 그렇게 할 수 있는지 궁금하다. 하지만 답장을 보내 주셔서 감사합니다 :) –

+0

@Oswaldo 나는 당신의 시도가 효과가 없었던 이유를 설명하기 위해 내 대답을 편집했습니다. – Christoph

+0

Thx, 이제는 왜 작동하지 않는지 이해합니다.이 코드와 같은 다른 프로그래밍 언어로 범위를 부여했다고 생각했습니다. 'var abc = 'white'; if ($ ('body'). hasClass ('blue')) {abc = '파랑'} $ ('본문') css ('배경색', abc), ' –