减少后卫不按预期工作

我有一个混合，有一个警卫条款。减少后卫不按预期工作

我按照指南，并相信下面的语法是正确的。

本质上，指南应确保@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

减少后卫不按预期工作

回答

相关问题