Как сгенерировать CSS с циклом меньше

Я не знаком с Less. В моем понимании, я думаю, Less может преобразовать файл формата Less в стандартный css файл (если я ошибаюсь, пожалуйста, исправьте меня). Теперь у меня есть вопрос ниже.

Предположим, что вы создадите 100 CSS-классов, как показано ниже (от .span1 до .span100) в одном файле CSS. Я хочу знать, может ли Less генерировать CSS файл, как он?

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

Ответы

Ответ 1

Все, я нашел способ вывода css в цикле. pleae рассматривает это .thanks.

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~"[email protected]{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

Ответ 2

Попробуйте, если вы используете последнюю версию LESS:

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    [email protected]{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

Вывод:

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

Редактировать 3 апреля 2014 года

Вот более гибкая версия с большим количеством опций:

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {

  @size : @[email protected]_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@[email protected]) , @step-size,  @selector, @property);
}

Вы можете называть это только @n, который является необходимым аргументом:

.custom-loop(@n:3);

Будет выводиться:

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

Но если вы хотите иметь контроль над каждым параметром, вот пример использования всех настраиваемых параметров:

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

Это выведет:

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

Описание параметров

  • @n: integer, Число итераций.

  • @базовое значение (необязательно): integer, начальное значение для цикла, которое должно быть присвоено свойству. Значением по умолчанию является то же самое значение, назначенное для количества итераций @n.

  • @unit (необязательно): string, единица для свойства. Значение по умолчанию - px.

  • @property (необязательно): non-string или string Свойство CSS. Значение по умолчанию: width

  • @selector (необязательно): escaped string, селектор, используемый для цикла. Может быть что угодно, пока он передается в виде экранированной строки.

  • @шаг-размер (необязательно): integer, значение, по которому цикл увеличивается.

ПРИМЕЧАНИЯ

Примечание 1: Пользовательский селектор передается как экранированная строка. Если он не сбежит, он не будет работать должным образом.

Примечание 2: Миксин вызывается явным образом с использованием имени параметра. Это имеет некоторые преимущества и недостатки:

Примечание 3: Устройство передается как строка.

<сильные > Преимущества

  • Ясно, какой параметр вызывается
  • Вам не нужно полагаться на порядок параметров и помнить, какой параметр приходит первым, вторым,...

Недостатки

  • Я думаю, это выглядит немного уродливо?
  • (добавьте в список и/или измените реализацию, если вы знаете лучший)

Ответ 3

Это невозможно сделать в рамках определенных методов.

Но возможно так:

.loopingClass (@index) when (@index > 0){
  [email protected]{index}{
    width: @index px;
  }
  .loopingClass(@index - 1);
}
.loopingClass(5);

Resilt будет выглядеть следующим образом:

.span_100 {
  width: 100 px;
}
.span_99 {
  width: 99 px;
}
.span_98 {
  width: 98 px;
}
.span_97 {
  width: 97 px;
}
.span_96 {
  width: 96 px;
}
.span_95 {
  width: 95 px;
}

and e.t.c.