Best practice for px-to-rem mixins

Question

I am creating some mixins to make me easier to convert px to rem values in margin which has 4 parameters top, right, bottom and left. In my code below, I make 16 mixins which is checking whether if the parameter is pixel or not.

// 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;
}

I have a problem when passing auto or not-a-number type of variables but it works with number and number with unit like px, rem, em, etc.

and when I see in developer mode it looks like this

Is there a better way to make my code clearer and not make a much junk in compiled css?

UPDATE

I forgot that I used , instead of and

Thank you, and sorry for my English

1

Best practice is to use sass :p – GGO Dec 05 '17 at 07:57

3rdthemagical · Answer 1 · 2017-12-05T08:47:36.247

You can use mixin as a function. to-rem can take up to 4 parameters to convert them to rem. @base-font is an additional parameter. This mixin returns 4 variables (@var1, @var2, @var3, @var4) in scope where it was called. But you can not call this mixin twice in the same scope. For margins and paddings, for example.

.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;
}

Usage:

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

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

a {
  .to-rem(12px);

  margin-top: @var1;
}

Generated css:

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

Or you can rewrite your mixins to have only one 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;
    }
  }
}

Usage:

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

Generated 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;
}

Thank you for the answer. I appreciate your long answer :D but I need combined margin instead. I upvoted. :) — Ampersanda, Dec 05 '17 at 09:09

score 0 · Accepted Answer · answered Dec 07 '17 at 04:50

0

I forgot that I used , instead of and

answered Dec 07 '17 at 04:50

Ampersanda

2,016
3
21
36

Best practice for px-to-rem mixins

2 Answers2