Im trying to create a LESS mixin for my font size and line-height but at the moment get an error when I try to run it. Can anyone advise where I might be going wrong with this:
.font( @size: 1.6, @line: @size * 1.5 ){
@fontSizeRem: @size;
@fontSizePx: ( @size * 10 );
@lineHeightRem: @line;
@lineHeightPx: ( @line * 10 );
font-size: ~"@{fontSizePx}px";
font-size: ~"@{fontSizeRem}rem";
line-height: ~"@{lineHeightPx}px";
line-height: ~"@{lineHeightRem}rem";
}
h1{
.font(1.6);
}
LESS does not support parameters which depend on other parameters. To implement an optional second argument, you can add another mixin:
.font( @size:1.6 ) {
.font(@size, @size * 1.5)
}
.font( @size, @line ) {
/* ... See question for the remainder ... */
compiles to:
h1 {
font-size: 16px;
font-size: 1.6rem;
line-height: 24.000000000000004px;
line-height: 2.4000000000000004rem;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.