Streamline МЕНЬШЕ Mixin

Question

У меня есть некоторые МЕНЬШЕ для создания отступов на основе стороне передается (сверху, справа, снизу, слева или все):

.margin(@px,@side) when (@side = top) { 
    (){ margin-top: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = right) { 
    (){ margin-right: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = bottom) { 
    (){ margin-bottom: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = left) { 
    (){ margin-left: ~"@{px}px"; } 
    } 
    .margin(@px,@side) when (@side = all) { 
    (){ margin-top: ~"@{px}px"; 
     margin-right: ~"@{px}px"; 
     margin-bottom: ~"@{px}px"; 
     margin-left: ~"@{px}px"; } 
    } 

Мой вопрос заключается в том, что если у меня есть удостоверение личности, как это:

#testfeature { 
.margin(10px,l); 
.margin(10px,r); 
} 

Затем МЕНЬШЕ компилирует это так:

#testfeature { 
margin-left:10px; 
} 

#testfeature { 
margin-right:10px; 
} 

Как я могу получить его для компиляции, как это:

#testfeature { 
margin-left:10px; 
margin-right:10px; 
} 

Answer 1

Избавьтесь от ненужных () { ... }, которые обертывают все ваши стили mixin. Они вызывают селекторы быть истолкованы как ни странно, и разделяя их на различный выбор, а не присоединения все под одного выбором:

.margin(@px,@side) when (@side = top) { 
    margin-top: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = right) { 
    margin-right: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = bottom) { 
    margin-bottom: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = left) { 
    margin-left: ~"@{px}px"; 
} 
.margin(@px,@side) when (@side = all) { 
    margin-top: ~"@{px}px"; 
    margin-right: ~"@{px}px"; 
    margin-bottom: ~"@{px}px"; 
    margin-left: ~"@{px}px"; 
} 

Вы могли бы также падение ~"@{px}px" в пользу просто @px, и последний должен Mixin вероятно, будет:

.margin(@px, @side) when (@side = all) { 
    margin: @px; 
} 

Answer 2

Чтобы получить их в группу, вам необходимо создать вложенный и сгруппированный микшин. Ниже представлена ​​группированная функция микширования, «обтекаемая» для настройки поля.

1. Требуется от 1 до 8 параметров; всегда находится в парах position, затем value (за исключением, как указано ниже, он может принимать любой порядок позиции, а значения auto или inherit разрешены).
2. Передача единственного «положения» только устанавливает поле 0px в этом положении.
3. По умолчанию номера единиц недействительны до px, но при этом явно передаются единицы измерения.
4. Передача единственного параметра, который является , номер значение будет устанавливать все поля на это число равным образом.

МЕНЬШЕ Mixin

.setMargins(@s1: ~'', @v1: 0, @s2: ~'', @v2: 0, @s3: ~'', @v3: 0, @s4: ~'', @v4: 0) { 

    .setPos(top, @T) { 
     .setNum() when (isnumber(@T)) { 
      margin-top: @T * 1px; 
     } 
     .setNum() when not (isnumber(@T)){ 
      margin-top: @T; 
     } 
     .setNum(); 
    } 
    .setPos(right, @R) { 
     .setNum() when (isnumber(@R)) { 
      margin-right: @R * 1px; 
     } 
     .setNum() when not (isnumber(@R)) { 
      margin-right: @R; 
     } 
     .setNum(); 
    } 
    .setPos(bottom, @B) { 
     .setNum() when (isnumber(@B)) { 
      margin-bottom: @B * 1px; 
     } 
     .setNum() when not(isnumber(@B)) { 
      margin-bottom: @B; 
     } 
     .setNum(); 
    } 
    .setPos(left, @L) { 
     .setNum() when (isnumber(@L)) { 
      margin-left: @L * 1px; 
     } 
     .setNum() when not (isnumber(@L)) { 
      margin-left: @L; 
     } 
     .setNum(); 
    } 
    //allows all to be called with one number or value 
    .setPos(@A, 0) when (isnumber(@A)) { 
      margin: @A * 1px; 
    } 
    .setPos(auto, 0) { 
      margin: auto; 
    } 
    .setPos(inherit, 0) { 
      margin: inherit; 
    } 
    //default null if no valid side given 
    .setPos(@other, 0) {} 
    //call all possible positions 
    .setPos(@s1, @v1); 
    .setPos(@s2, @v2); 
    .setPos(@s3, @v3); 
    .setPos(@s4, @v4); 
} 

Примеры

1. .setMargins(right); производит margin-right: 0px;
2. .setMargins(right, 15); производит margin-right: 15px;
3. .setMargins(left, 10em); производит margin-left: 10em;
4. .setMargins(top, 12, right, 10); производит: margin-top: 12px; margin-right: 10px;
5. .setMargins(25); производит: margin: 25px;
6. .setMargins(auto); производит: margin: auto;

Таким образом, вы использовать его в селекторе:

МЕНЬШЕ

#testfeature { 
    .setMargins(left, 10, right, 10); 
} 

CSS Выходной

#testfeature { 
    margin-left: 10px; 
    margin-right: 10px; 
}