CSS 混入
.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);
}
我所做的只是在其上方声明三个变量。你在哪里宣布他们的值(value)观?如果它在不同的文件中,请确保您在导入带有这些 mixin 的文件之前导入该文件。
关于css - 更少的 mixin 返回 Nanpx,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18058857/