減少後衛不按預期工作

我有一個混合，有一個警衛條款。減少後衛不按預期工作

我按照指南，並相信下面的語法是正確的。

本質上，指南應確保@palette是一系列自定義顏色之一，並且@color來自一組數字。

這個工作 - 它編譯併產生正確的輸出。

但是，如果我更改@palette變量導致錯誤，更少不編譯 - 這是預期的行爲？

.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; 
}

來源

2016-08-30 John Ohara

當* Less不能編譯*時，您會收到什麼錯誤？ – Justinas

這不是非常有用的信息，它只是給我一個-1，它每隔一次它就不編譯。我正在使用ServiceStack Bundler集成到一個asp.net網站。 –

如果聲明瞭50-900個變量，那麼您在此處發佈的代碼不應導致編譯器錯誤。問題可能出自'.Swatch（...）'，你能否在該問題中包含mixin的代碼？ – Harry

相反的是我在先前的評論說，這個問題其實是與.AccentPalette混入後衛。看起來Less編譯器在,（或）之前評估and。正因爲如此，當你不爲@color變量提供任何值時，守衛始終得到匹配，因爲守衛@color = 500始終爲真。

考慮以下簡化的例子：

@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); 
}

編譯器似乎如下對其進行評估：（注意額外的一對括號）

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

此計算結果爲(false, (false and false), true, false)或(false, false, true, false），所以mixin總是匹配的，因爲有一個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); 
}

來源

2016-08-31 15:50:43 Harry

減少後衛不按預期工作

回答

相關問題