LESS compilation for mixin either failed or giving wrong css

Question

I have less 1.6 and working with Crunch 1.8.1 I tried to create dynamic grid class like

.grid-12 {
  width: 12px;
}

.grid-11 {
  width: 11px;
}

and so on. My code part for this is

.grid (@index, @colWidth: 80) when (@index > 0)  {
   (~".grid-@{index}px")
   {
       width: ~"@{index}px";
    }
}

but it gives compiler error Compiler Errors Unrecognised input (Line: 24) Filename: C:\\onepager\styles\style.less

to break down the problem, I tested the below mixin (a part of my recursive mixin) one and is compiled successfully but with strange output, as ~ character is not escaping the quotes sign like below: in less

.grid (@index, @colWidth: 80) when (@index > 0)  {
 (~".grid-")
   {
       width: ~"@{index}px";
   }
}
.grid (0, @_) {}
.grid(12);

but it gives me just below output css (the " character remain their along with ~) with crunch

(~".grid-") {
  width: 12px;
}

while I am expecting it as

.grid- {
  width: 12px;
}`

so the compiler error is due to inclusion of @{index}px in less, which is working fine in the statement under the function.

AKS AKS · Accepted Answer · 2014-03-26T10:42:46

Finally I did resolve the same.

No need for escape tild and brackets to make it.

I did resolve the issue by

replacing

 (~".grid-@{index}px")

with

.grid-@{index}px

as:

.grid (@index, @colWidth: 80) when (@index > 0)  {
   .grid-@{index} {
      @width: @index * @colWidth;
       width: ~"@{width}px";
    }

  .grid(@index - 1, @colWidth);
}
.grid (0, @_) {}

LESS compilation for mixin either failed or giving wrong css

1 Answers