如何在 LESS 编译器中抛出错误
How to throw an error in the LESS compiler
问题
有什么方法可以(以编程方式)在 LESS 编译器中抛出错误吗?
为什么?
我今天一直在摆弄 mixin 守卫,因为我想根据元素大小和元素数量生成我的 CSS 边距。
当元素不适合包装器时,我认为直接在编译时抛出错误会很酷。
Info:我正在使用 lessc
编译器将我的 LESS 代码编译为 CSS。我没有使用任何 Javascript 库在执行时编译它。
来源较少
// Variables
@wrapper-small: 830px;
@wrapper-big: 1200px;
.col-fixed(@size, @count, @wrapper) when ((@size*@count) <= @wrapper)
{
width: unit(@size, px);
margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);
}
.test_col_fixed {
// will fail the mixin guard and output no generated CSS
.col-fixed(340, 3, @wrapper-small);
// would work if not in comment
// .col-fixed(340, 3, @wrapper-big);
}
生成CSS(小包装)
没有输出,因为没有匹配到mixin guard不会生成代码when ((@size*@count) <= @wrapper) // 3*340 <= 830 is false
。
已生成 CSS(带有工作解决方案,大包装器)
.test_col_fixed {
width: 340px;
margin-right: 90px;
}
建议,但严格不推荐
.col-fixed(@size, @count, @wrapper) {
& when ((@size*@count) <= @wrapper) {
width: unit(@size, px);
margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);
}
& when ((@size*@count) > @wrapper) {
/* there is no such variable and hence when the input value is not valid,
compiler will complain that variable is undefined */
output: @bwahahaha;
}
}
问题
有什么方法可以(以编程方式)在 LESS 编译器中抛出错误吗?
为什么?
我今天一直在摆弄 mixin 守卫,因为我想根据元素大小和元素数量生成我的 CSS 边距。 当元素不适合包装器时,我认为直接在编译时抛出错误会很酷。
Info:我正在使用 lessc
编译器将我的 LESS 代码编译为 CSS。我没有使用任何 Javascript 库在执行时编译它。
来源较少
// Variables
@wrapper-small: 830px;
@wrapper-big: 1200px;
.col-fixed(@size, @count, @wrapper) when ((@size*@count) <= @wrapper)
{
width: unit(@size, px);
margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);
}
.test_col_fixed {
// will fail the mixin guard and output no generated CSS
.col-fixed(340, 3, @wrapper-small);
// would work if not in comment
// .col-fixed(340, 3, @wrapper-big);
}
生成CSS(小包装)
没有输出,因为没有匹配到mixin guard不会生成代码when ((@size*@count) <= @wrapper) // 3*340 <= 830 is false
。
已生成 CSS(带有工作解决方案,大包装器)
.test_col_fixed {
width: 340px;
margin-right: 90px;
}
建议,但严格不推荐
.col-fixed(@size, @count, @wrapper) {
& when ((@size*@count) <= @wrapper) {
width: unit(@size, px);
margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);
}
& when ((@size*@count) > @wrapper) {
/* there is no such variable and hence when the input value is not valid,
compiler will complain that variable is undefined */
output: @bwahahaha;
}
}