css - css less mixin rem 计算器，而不是针对字体或其他东西

Question

大家早上好，我有以下mixin，我想把它变成一个全局的。我的意思是没有设置我想将其用于字体大小的边距，例如 .. 或您可能希望将其设置为 rem / em 单位的任何其他内容。我是 less 和预处理器的新手，我想知道这里的人是否可以帮助我更改代码。非常感谢您的宝贵时间。

.marginSizeCalc(@sv) {
  @sizeValue: unit(@sv);
  @remValue: (@sizeValue / @font-size-base);
  margin: unit(@sv,px);
  margin: unit(@remValue,rem);
}

Answer 1

找到了解决问题的方法......我认为它甚至比在 mixin 中设置边距或字体或其他任何东西更好。

.marginSizeCalc(@sv) {
  @sizeValue: unit(@sv);
  @remValue: (@sizeValue / @font-size-base);
  @toRem: unit(@remValue, rem);
}

如何：

h1, h2, h3, h4, h5, h6 {
    font-family: @headings-font-family;
    font-weight: @headings-font-weight;
    color: @headings-font-color;
    margin: @remValue;
    margin: @toRem;
    .marginSizeCalc(@gutterWidth);
}

更新：

.marginSizeCalc(@sv, @db) {
  @sizeValue: unit(@sv);
  @divideBy: unit(@sv);
  @remValue: (@sizeValue / @divideBy);
  @toPx: unit(@remValue, px);
  @toRem: unit(@remValue, rem);
}

h1, h2, h3, h4, h5, h6 {
    font-family: @headings-font-family;
    font-weight: @headings-font-weight;
    color: @headings-font-color;
    margin: @toPx;
    margin: @toRem;
    .marginSizeCalc(@gutterWidth, 2);
}