如何在 less 中获取 mixin 中的内部变量?
How to get an inner variable inside a mixin in less?
我试图在混入中获取变量,但在使用守卫时它不起作用。我肯定错过了规则中的某些内容。请参考以下代码片段。
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient; // here I need the output
}
.custom-colors(@value, @light, @dark, @lightdark){
& when (@lightdark = true){
@gradient: lighten(extract(@value, 1), @light), darken(extract(@value, 2), @dark);
}
& when (@lightdark = false){
@gradient: darken(extract(@value, 1), @dark), lighten(extract(@value, 2), @light);
}
}
我在执行上面的代码时遇到了这个错误:
如果我删除了保护条件,我可以在 less mixin 中获取变量,如下所示。
div {
color: #000000, #cccccc;
}
我错过了什么?
您的错误在于假设 & when
构造有点类似于 C 类语言的 if
。但事实并非如此,& {}
只是一个普通的 CSS 规则集(例如 div {}
)以 &
作为其选择器,并且作为一个普通的规则集,它不会公开任何外部范围的内部变量。
只有 mixins 在调用时将其内部暴露给外部作用域,因此实现您需要的方法之一是:
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient;
}
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = true) {
@gradient: lighten(extract(@value, 1), @light),
darken(extract(@value, 2), @dark);
}
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = false) {
@gradient: darken(extract(@value, 1), @dark),
lighten(extract(@value, 2), @light);
}
可以进一步简化为:
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient;
}
.custom-colors(@value, @light, @dark, true) {
@gradient: lighten(extract(@value, 1), @light),
darken(extract(@value, 2), @dark);
}
.custom-colors(@value, @light, @dark, false) {
@gradient: darken(extract(@value, 1), @dark),
lighten(extract(@value, 2), @light);
}
另请注意,darken(somecolor, somevalue)
等于 lighten(somecolor, -somevalue)
,反之亦然,因此可以根据实际代码段进一步优化整个过程。
我试图在混入中获取变量,但在使用守卫时它不起作用。我肯定错过了规则中的某些内容。请参考以下代码片段。
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient; // here I need the output
}
.custom-colors(@value, @light, @dark, @lightdark){
& when (@lightdark = true){
@gradient: lighten(extract(@value, 1), @light), darken(extract(@value, 2), @dark);
}
& when (@lightdark = false){
@gradient: darken(extract(@value, 1), @dark), lighten(extract(@value, 2), @light);
}
}
我在执行上面的代码时遇到了这个错误:
如果我删除了保护条件,我可以在 less mixin 中获取变量,如下所示。
div {
color: #000000, #cccccc;
}
我错过了什么?
您的错误在于假设 & when
构造有点类似于 C 类语言的 if
。但事实并非如此,& {}
只是一个普通的 CSS 规则集(例如 div {}
)以 &
作为其选择器,并且作为一个普通的规则集,它不会公开任何外部范围的内部变量。
只有 mixins 在调用时将其内部暴露给外部作用域,因此实现您需要的方法之一是:
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient;
}
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = true) {
@gradient: lighten(extract(@value, 1), @light),
darken(extract(@value, 2), @dark);
}
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = false) {
@gradient: darken(extract(@value, 1), @dark),
lighten(extract(@value, 2), @light);
}
可以进一步简化为:
@list: #000, #fff;
div {
.custom-colors(@list, 0%, 20%, true);
color: @gradient;
}
.custom-colors(@value, @light, @dark, true) {
@gradient: lighten(extract(@value, 1), @light),
darken(extract(@value, 2), @dark);
}
.custom-colors(@value, @light, @dark, false) {
@gradient: darken(extract(@value, 1), @dark),
lighten(extract(@value, 2), @light);
}
另请注意,darken(somecolor, somevalue)
等于 lighten(somecolor, -somevalue)
,反之亦然,因此可以根据实际代码段进一步优化整个过程。