Css 在另一个mixin中使用LESS中的一个mixin
我正在尝试使用一个混合来计算另一个包含我的基本字体样式中的基线高度。每次尝试编译时,都会出现一个错误 这里有一个例子Css 在另一个mixin中使用LESS中的一个mixin,css,styles,less,mixins,Css,Styles,Less,Mixins,我正在尝试使用一个混合来计算另一个包含我的基本字体样式中的基线高度。每次尝试编译时,都会出现一个错误 这里有一个例子 .lineHeight(@sizeValue){ @remValue: @sizeValue; @pxValue: (@sizeValue * 10); line-height: ~"@{pxValue}px"; line-height: ~"@{remValue}rem"; } .baseFont(@weight: normal, @size: 14px, @lineHeig
.lineHeight(@sizeValue){
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
line-height: ~"@{pxValue}px";
line-height: ~"@{remValue}rem";
}
.baseFont(@weight: normal, @size: 14px, @lineHeight: (.lineHeight(2.1)) {
font-family: @fontFamily;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
错误是:
TypeError:无法调用未定义的方法“charAt”
在getLocation(/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:212:34)
在新的LessError(/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:221:19)
在Object.tocs(/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:385:31)
at/Applications/CodeKit.app/Contents/Resources/engines/less/bin/lessc:107:28
at/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:434:40
at/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:94:48
at/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/index.js:116:17
at/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:434:40
at/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/parser.js:94:48
在/Applications/CodeKit.app/Contents/Resources/engines/less/lib/less/index.js:116:17,从另一个mixin的参数列表调用mixin是没有意义的(除了在调用mixin之前有一个额外的
(
)
这是我对mixin继承的尝试,它适用于您的情况,但不是我见过的最不优雅的继承。权重和大小的默认值也需要在两个地方重复:
.lineHeight(@sizeValue){
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
line-height: ~"@{pxValue}px";
line-height: ~"@{remValue}rem";
}
// Shared by both versions of baseFont, never used directly
.commonBaseFont(@weight, @size) {
font-family: @fontFamily;
font-size: @size;
font-weight: @weight;
}
// baseFont called without lineHeight argument
.baseFont(@weight: normal, @size: 14px){
.commonBaseFont(@weight, @size);
.lineHeight(2.1)
}
// baseFont called with lineHeight argument
.baseFont(@weight: normal, @size: 14px, @lineHeight) {
.commonBaseFont(@weight, @size);
line-height: @lineHeight;
}