少喝混合物返回Nanpx

时间:2013-08-05 13:02:36

标签: css css3 less

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;
}

有人可以帮我解决使用font-size解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

当我将其粘贴到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);
}

我所做的只是声明它上面的三个变量。你在哪里宣布他们的价值观?如果它位于不同的文件中,请确保在具有这些mixin的文件之前导入该文件。