px-to-rem mixin 的最佳实践 [重复]

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 在它被调用的范围内返回 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 以只有一个边距 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