Как оптимизировать мой миксин LESS?

Этот миксин генерирует вспомогательные классы для Bootstrap.

Я уверен, что есть способ улучшить этот миксин с помощью циклов.

.generate-margin-tops(@size) {
  .mt-@{size}-5 {
    margin-top: 5px;
  }

  .mt-@{size}-10 {
    margin-top: 10px;
  }

  .mt-@{size}-20 {
    margin-top: 20px;
  }

  .mt-@{size}-30 {
    margin-top: 30px;
  }

  .mt-@{size}-40 {
    margin-top: 40px;
  }
}

Фрагмент, используемый для разных размеров экрана:

.generate-margin-tops(xs);

@media (min-width: @screen-sm-min) {
  .generate-margin-tops(sm);
}

@media (min-width: @screen-md-min) {
  .generate-margin-tops(md);
}

@media (min-width: @screen-lg-min) {
  .generate-margin-tops(lg);
}

P.S. См. мое окончательное решение


twitter-bootstrap less less-mixins
person acelot    schedule 20.12.2014    source источник
comment
Что такое переменная @size? Какая у него ценность. Кстати, да, это можно улучшить с помощью циклов.   -  person Harry    schedule 20.12.2014

Ответы (2)


arrow_upward
1
arrow_downward

Это можно упростить с помощью циклов, как показано ниже (пояснение в комментариях):

.generate-margin-tops(@size, @index) when (@index > 0) {
    @margin-top: extract(@margin-px, @index); //extract the margin value corresponding to the index/counter variable
    .mt-@{size}-@{margin-top} { //selector interpolation to form the selector
        margin-top: unit(@margin-top,px); //converts plain number to px units
    }
    .generate-margin-tops(@size, @index - 1); //call to the next iteration by decrementing the counter
}

@margin-px: 5, 10, 20, 30, 40; //array list variable which contains the various margin pixels

.generate-margin-tops(xs, length(@margin-px)); //call to loop mixin

@media (min-width: @screen-sm-min) {
  .generate-margin-tops(sm, length(@margin-px));
}

@media (min-width: @screen-md-min) {
  .generate-margin-tops(md, length(@margin-px));
}

@media (min-width: @screen-lg-min) {
  .generate-margin-tops(lg, length(@margin-px));
}
person Harry    schedule 20.12.2014
comment
Я не знал о функции extract. Великолепно! Я отмечу ваш ответ как правильный как можно скорее - person acelot; 20.12.2014
comment
@PiONeeR: Приятно знать, что это помогло, приятель :) Я также обновил вызов миксина до следующей итерации в образце (ранее он был жестко запрограммирован как xs). Я уверен, что вы нашли бы это и правильно, но не хотели оставлять ответ наполовину испеченным :) - person Harry; 20.12.2014
comment
Я также сделал ряд отступов как переменную @margin-tops-count: length(@margin-tops); :) - person acelot; 20.12.2014
comment
@PiONeeR: Да, это еще одна вещь, которую мы можем сделать, и, кстати, спасибо за оценку и голосование. Очень признателен :) - person Harry; 20.12.2014

arrow_upward
1
arrow_downward

@Harry очень помог мне справиться с циклами в меньшем количестве. В конце концов я пришел к такому решению:

@margin-tops: quarter 0.25, half 0.5, one 1, two 2, three 3, four 4;

.generate-margin-tops(@suffix: ~'', @i: 1) when (@i =< length(@margin-tops)) {
  @item:  extract(@margin-tops, @i);
  @key:   extract(@item, 1);
  @value: extract(@item, 2);

  .mt-@{key}@{suffix} {
    margin-top: @line-height-computed * @value;
  }

  .generate-margin-tops(@suffix, @i + 1);
}

Результат .generate-margin-tops(-sm):

.mt-quarter-sm { margin-top: 5px }
.mt-half-sm { margin-top: 10px }
.mt-one-sm { margin-top: 20px }
.mt-two-sm { margin-top: 40px }
.mt-three-sm { margin-top: 60px }
.mt-four-sm { margin-top: 80px }
person acelot    schedule 15.01.2015