px-to-rem 混合的最佳实践

Question

我正在创建一些 mixins，以便更轻松地将边距中的 px 值转换为 rem 值，其中有 4 个参数 top、right、bottom 和 left。在我下面的代码中，我制作了 16 个 mixin，用于检查参数是否为像素。

// TODO --> margin

// T T T T
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}

// T F T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem @right unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}

// T T F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem @bottom unit(@left)/@base-font*1rem;
}

// T F F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem @right @bottom unit(@left)/@base-font*1rem;
}

// T T T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem @left;
}

// T F T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem @right unit(@bottom)/@base-font*1rem @left;
}

// T T F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem @bottom @left;
}

// T F F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: unit(@top)/@base-font*1rem @right @bottom @left;
}

// F T T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: @top unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}

// F F T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: @top @right unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}

// F T F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: @top unit(@right)/@base-font*1rem @bottom unit(@left)/@base-font*1rem;
}

// F F F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left)){
  margin: @top @right @bottom @left;
  margin: @top @right @bottom unit(@left)/@base-font*1rem;
}

// F T T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: @top unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem @left;
}

// F F T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: @top @right unit(@bottom)/@base-font*1rem @left;
}

// F T F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
  margin: @top unit(@right)/@base-font*1rem @bottom @left;
}

// F F F F
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left) = false){
  margin: @top @right @bottom @left;
}

我在传递 auto 或 not-a-number 类型的变量时遇到问题，但它适用于 number 和 number with unit，如 px、rem、em 等

当我在开发者模式下看到它看起来像这样

有没有更好的方法可以让我的代码更清晰并且不会在编译后产生太多垃圾css？

更新

我忘了我用的是,而不是and

谢谢你，对不起我的英语

Answer 1

您可以使用 mixin as a function。 to-rem 最多可以接受 4 个参数来将它们转换为 rem。 @base-font 是附加参数。这个 mixin returns 4 个变量（@var1、@var2、@var3、@var4）在它被调用的范围内。但是你不能在同一个范围内两次调用这个mixin。例如，对于边距和填充。

.to-rem(@v1: 0, @v2: 0, @v3: 0, @v4: 0, @base-font: 14px) {
  @var1: unit(@v1) / @base-font * 1rem;
  @var2: unit(@v2) / @base-font * 1rem;
  @var3: unit(@v3) / @base-font * 1rem;
  @var4: unit(@v4) / @base-font * 1rem;
}

用法：

a {
  .to-rem(12px, 20px, 24px, 20px);

  margin: @var1 @var2 @var3 @var4;
}

a {
  .to-rem(12px);

  margin-top: @var1;
}

生成css:

a {
  margin: 0.85714286rem 1.42857143rem 1.71428571rem 1.42857143rem;
}
a {
  margin-top: 0.85714286rem;
}

或者你可以重写你的 mixin 使其只有一个 margin mixin:

@base-font: 14px;

.margin(@top: null, @right: null, @bottom: null, @left: null) {
  & when not (@top = null) {
    & when (ispixel(@top)) {
      margin-top: unit(@top) / @base-font * 1rem;
    }
    & when not (ispixel(@top)) {
      margin-top: @top;
    }
  }
  & when not (@right = null) {
    & when (ispixel(@right)) {
      margin-right: unit(@right) / @base-font * 1rem;
    }
    & when not (ispixel(@right)) {
      margin-right: @right;
    }
  }
  & when not (@bottom = null) {
    & when (ispixel(@bottom)) {
      margin-bottom: unit(@bottom) / @base-font * 1rem;
    }
    & when not (ispixel(@bottom)) {
      margin-bottom: @bottom;
    }
  }
  & when not (@left = null) {
    & when (ispixel(@left)) {
      margin-left: unit(@left) / @base-font * 1rem;
    }
    & when not (ispixel(@left)) {
      margin-left: @left;
    }
  }
}

用法：

a {  
  .margin(12px, 20px, 10px, 20px);
}
a {
  .margin(@top: auto); // You can pass only those params you need
}

生成css:

a {
  // Don't know how to combine this properties
  margin-top: 0.85714286rem; 
  margin-right: 1.42857143rem;
  margin-bottom: 0.71428571rem;
  margin-left: 1.42857143rem;
}
a {
  margin-top: auto;
}

Answer 2

我忘了我用的是,而不是and

px-to-rem 混合的最佳实践

Best practice for px-to-rem mixins

html

css

less