使用less的垂直节奏答案

【问题标题】：vertical rhythm using less使用less的垂直节奏
【发布时间】：2014-03-10 07:45:04
【问题描述】：

最近，我阅读了 this article 关于垂直节奏的文章，我正在尝试根据文章使用 less 进行实现，我想知道我是否以正确的方式进行操作，因为基于它所做的数学运算如果我的数学计算，24px 字体的行高为 1px。 :D（我的数学从来都不是很好）。

.font-size(@target-px-size, @context-px-size: @base-font-size) {
    font-size: @toPx;
    font-size: @toRem;
    .rem(@target-px-size, @context-px-size);
}
.rhythm(@target-px-size) {
    .font-size(@target-px-size);
    @result: unit((@base-line-height / @target-px-size));
    line-height: @result;
    margin-top: unit(@result, px);
    margin-top: unit(@result, rem);
    margin-bottom: unit(@result, px);
    margin-bottom: unit(@result, rem);
}
// Rem Calculator
.rem(@target-px-size, @context-px-size: @base-font-size) {
    @divide-By: unit(@context-px-size);
    @sizeValue: unit(@target-px-size);
    @remValue: round(@sizeValue / @divide-By, 1);
    @toPx: unit(@sizeValue, px);
    @toRem: unit(@remValue, rem);
}

【问题讨论】：

标签： html css less

【解决方案1】：

这似乎有效。我已经使用这个网站Vertical rhythm

检查了它与不同的值

垂直节奏混合器

.font-size(@target-px-size, @context-px-size: @base-font-size-px) {
    .rem(@target-px-size, @context-px-size);
    font-size: @toPx;
    font-size: @toRem;    
}

.rhythm(@target-px-size) {
    .font-size(@target-px-size);
    @result: unit((@base-line-height-px / @target-px-size));
    line-height: @result;
    margin-top: unit(@result, px);
    margin-top: unit(@result, rem);
    margin-bottom: unit(@result, px);
    margin-bottom: unit(@result, rem);
}

.rem(@target-px-size; @context-px-size: @base-font-size-px){
    @ratio: 1 / @context-px-size;
    @result: unit(@target-px-size * @ratio);
    @toPx: unit(@target-px-size, px);
    @toRem: unit(@result, rem);
}

// Usage
@base-font-size-px: 12px;
@base-line-height-px: 24px;

.bacon {    
    .rhythm(24);
}

【讨论】：