px-to-rem mixins的最佳实践

Question

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

// 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在调用它的范围内返回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;
}

或者你可以重写你的mixins只有一个余量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