[英]less mixin returning Nanpx
CSS Mixin
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (@font-scale > 0) {
@new-font-size: round(@base-font-size * pow(@base-scale-factor, @font-scale));
font-size: @new-font-size;
line-height: ceil((@new-font-size / (@base-line-height * @base-font-size))) * (@base-line-height * @base-font-size);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (@font-scale = 0) {
@new-font-size: round(@base-font-size * pow(@base-scale-factor, @font-scale));
font-size: @new-font-size;
line-height: ceil((@new-font-size / (@base-line-height * @base-font-size))) * (@base-line-height * @base-font-size);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (isnumber(@margin-top)) {
margin-top: @base-font-size * (@base-line-height * @margin-top);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (isnumber(@margin-bottom)) {
margin-bottom: @base-font-size * (@base-line-height * @margin-bottom);
}
用法:
p {
.rhythm(4, 1, 2);
}
輸出:
p {
font-size: NaN;
line-height: NaN;
margin-top: 24;
margin-bottom: 48;
}
有人可以幫我解決字體大小的問題嗎?
當我將其粘貼到Codepen( http://codepen.io/anon/pen/wkFdc )中時,以下內容對我有用。
@base-font-size: 12px;
@base-scale-factor: 2;
@base-line-height: 12px;
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (@font-scale > 0) {
@new-font-size: round(@base-font-size * pow(@base-scale-factor, @font-scale));
font-size: @new-font-size;
line-height: ceil((@new-font-size / (@base-line-height * @base-font-size))) * (@base-line-height * @base-font-size);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (@font-scale = 0) {
@new-font-size: round(@base-font-size * pow(@base-scale-factor, @font-scale));
font-size: @new-font-size;
line-height: ceil((@new-font-size / (@base-line-height * @base-font-size))) * (@base-line-height * @base-font-size);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (isnumber(@margin-top)) {
margin-top: @base-font-size * (@base-line-height * @margin-top);
}
.rhythm(@font-scale, @margin-top : false, @margin-bottom : false)
when (isnumber(@margin-bottom)) {
margin-bottom: @base-font-size * (@base-line-height * @margin-bottom);
}
p {
.rhythm(4,1,2);
}
我所做的就是聲明其上方的三個變量。 您在哪里聲明他們的價值觀? 如果它在另一個文件中,請確保先導入具有這些mixins的文件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.