css less mixin rem 计算器而不被定向到字体或其他东西

Question

大家早上好，我有以下 mixin，我想将其转换为全局 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);
}