덜 가드가 예상대로 작동하지 않습니다.

Question

가드 절이있는 믹스 인을 가지고 있습니다.

나는 가이드를 따라 왔으며 아래 구문이 정확하다고 생각합니다.

본질적으로 가이드는 @palette가 맞춤 색상 범위 중 하나이고 @color가 세트의 숫자임을 보장해야합니다.

이 기능은 컴파일되고 올바른 출력을 생성합니다.

그러나 @palette 변수를 변경하여 오류가 발생하면 Less는 컴파일되지 않습니다. 예상되는 동작입니까? 이런 식으로 호출

.AccentPalette(@palette; @color:500) when 
    (@palette = amber), (@palette = blue), (@palette = blueGrey), (@palette = cyan), (@palette = deepOrange), 
    (@palette = deepPurple), (@palette = green), (@palette = grey), (@palette = indigo), (@palette = lightBlue), 
    (@palette = lightGreen), (@palette = lime), (@palette = orange), (@palette = pink), (@palette = purple), 
    (@palette = red), (@palette = teal), (@palette = yellow) and 
    (@color = 50), (@color = 100), (@color = 200), (@color = 300), (@color = 400), 
    (@color = 500), (@color = 600), (@color = 700), (@color = 800), (@color = 900) { 
    .Swatch(@palette); 

    @accentColor:"@{@{color}}"; 

    @accent50: @50; 
    @accent100: @100; 
    @accent200: @200; 
    @accent300: @300; 
    @accent400: @400; 
    @accent500: @500; 
    @accent600: @600; 
    @accent700: @700; 
    @accent800: @800; 
    @accent900: @900; 
} 

:

.AccentPalette(indigo); 

견본 예 - 그들 중 다수, 각 색상 하나가있다. 나는 내 이전 코멘트에서 말을 달리

.Swatch(amber) 
{ 
    @50: #fff8e1; 
    @100:#ffecb3; 
    @200:#ffe082; 
    @300:#ffd54f; 
    @400:#ffca28; 
    @500:#ffc107; 
    @600:#ffb300; 
    @700:#ffa000; 
    @800:#ff8f00; 
    @900:#ff6f00; 
} 

Answer 1

는 문제가 .AccentPalette 믹스 인 가드 사실이다. 덜 컴파일러가 , (또는) 앞에 and을 평가하는 것 같습니다. 이 때문에 가드 @color = 500이 항상 true이므로 @color 변수에 값을 제공하지 않으면 가드가 항상 일치합니다.)

(@palette = amber), ((@palette = blue) and (@color = 50)), (@color = 500), (@color = 900)

이 (false, (false and false), true, false) 또는 (false, false, true, false 평가 (괄호의 추가 쌍 주) :

이

@500: dummy; 
.AccentPalette(@palette; @color:500) when 
(@palette = amber), (@palette = blue) and 
(@color = 50), (@color = 500), (@color = 900) { 
    .Swatch(@palette); 
    accentColor:"@{@{color}}"; 
} 

.Swatch(amber){} 
.Swatch(blue){} 

#demo { 
    .AccentPalette(amber;1000); 
} 

컴파일러는 다음과 같이 평가하는 것 같다

아래의 간단한 예제를 생각해 봅시다 , 믹스 인은 항상 하나가 일치하므로 true입니다.

((@palette = amber),(@palette = blue)) and ((@color = 50),(@color = 500),(@color = 900))

하지만 적은 컴파일러는 괄호의 추가 쌍을 좋아하지 않는 것와 컴파일러를 제공합니다 다음과 같이

---

적절한 수정은 믹스 인 가드를 작성 했 오류. 그래서, 아래의 예처럼 가드를 두 단계로 나눌 수있는 유일한 방법이 있습니다.

@500: dummy; 

.AccentPalette(@palette; @color:500) when (@palette = amber), (@palette = blue) { 
    & when (@color = 50), (@color = 500), (@color = 900) { 
    .Swatch(@palette); 
    accentColor:"@{@{color}}"; 
    } 
} 

.Swatch(amber){} 
.Swatch(blue){} 

#demo { 
    .AccentPalette(red); 
}