CSS LESS Output Issue

Question

CSS/Less Input:

.generate-tiles(12);

.generate-tiles(@n, @i: 1) when (@i =< @n) {
  .generate-tiles(@n, (@i + 1));
  .tile-@{i} {
    transform: rotateX(60deg) rotateZ(45deg) translate3d(((@i - 1) * 45)px, 0px, 0px);
  }
}

Output:

.tile-1 {
  transform: rotateX(60deg) rotateZ(45deg) translate3d(0 px, 0px, 0px);
}

The function works perfect, but I can't figure out why it's creating a space between the # and px as seen here:

(495 px, 0px, 0px);

Britni · Accepted Answer · 2017-07-22 07:50:30Z

1

If you calculate the value in a variable and then insert the variable in an escaped string, it outputs without the space:

@t: (@i - 1) * 45;
transform: rotateX(60deg) rotateZ(45deg) translate3d(~'@{t}px', 0px, 0px);

answered Jul 22, 2017 at 7:50

Britni

3641 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS LESS Output Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related