Blank spaces in LESS functions

Question

Blank spaces in LESS functions

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I see a blank space between variable and constant. When rendered in the browser, it interprets it as an invalid attribute as expected.

In the English version they have commented to me, well, marked as duplicated the question, but it is not exactly the same, since in the answers they gave me, they did not do arithmetic, but they were already fixed attributes.

INPUT:

.generateDelay(5);
.generateDelay(@n, @i: 1) when (@i =< @n) {
    &:nth-child(@{i}) { 
        animation-delay: (.25*@i)s;
    }
    .generateDelay(@n, (@i + 1));
}

OUTPUT:

animation-delay: 0.25 s;
animation-delay: 0.5 s; //etc

Any solution?

css less

asked by Cheshire 20.04.2018 в 13:38

source

2 answers

1

Another option is to use the unit function:

Less

.generateDelay(5);
.generateDelay(@n, @i: 1) when (@i =< @n) {
    &:nth-child(@{i}) { 
      animation-delay: unit((.25*@i),s);
    }
    .generateDelay(@n, (@i + 1));
}

CSS

:nth-child(1) {
  animation-delay: 0.25s;
}
:nth-child(2) {
  animation-delay: 0.5s;
}
:nth-child(3) {
  animation-delay: 0.75s;
}
:nth-child(4) {
  animation-delay: 1s;
}
:nth-child(5) {
  animation-delay: 1.25s;
}

answered by 23.04.2018 в 14:41

error query php sql phpmyadmin in data type SET, does not return the data correctly (write error) How to stop scheduleTaskExecutor process?

score 2 · Accepted Answer

2

Put the "unit of measure" in the operation

.generateDelay(5);
.generateDelay(@n, @i:2) when (@i =< @n) {
   &:nth-child(@{i}) {
      @b: (.25s*@i);
       animation-delay: @b;
    }
   .generateDelay(@n, (@i + 1));
}

answered by 20.04.2018 / 14:24

source