On input of long escaped property value in LESS, how to split it to a newline

问题

Suppose I have a really long escaped property value to input in LESS. I can get it to output with newlines in the final formatted css by setting a variable to add a newline like so @nl: `"\n"`; and use that in my escaped string to output newlines in the property value. So this:

@nl: `"\n"`;

.test {
  property: ~"one,@{nl}            two";
}

Will output this:

.test {
  property: one,
            two;
}

The question is whether there is any way to input it with newlines, something like:

.test {
  property: ~"one,
              two";
}

This throws a Parse error: Unrecognised input in LESS. A long set of property values like one might have with a progid:DXImageTransform.Microsoft.Matrix would benefit from being able to code it with newlines to begin with.

Though I posted an answer to my own question that I discovered worked, I'm open to a simpler one if it exists.

回答1:

Well, one solution I have found is to put each line in its own escaped string. So this seems to work reasonably well for both input and output (depending on what the tab setting is):

Input LESS

@nl: `"\n\t\t\t"`;

.test {
  property: ~"@{nl}"
    ~"one,@{nl}"
    ~"two";
}

Output CSS

.test {
  property: 
      one,
      two;
}

回答2:

In short, no. Less does not support any kind of multiline strings (Recently this feature was proposed and rejected for various reasons). Though, speaking of IE hacks, the following code compiles fine since v1.4.2:

.rotate(@angle) {
    @cos:     cos(@angle);
    @sin:     sin(@angle);
    @nsin: (0-sin(@angle));
    -ms-filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=@cos,
        M12=@sin,
        M21=@nsin,
        M22=@cos,
        sizingMethod='auto expand'
    );
}

test {
    .rotate(20deg);
}

The only problem there is the combination of =, - and func() that needs some special handling.

Update,

as for the per line escaped strings example I guess the following would look a bit more clear:

@nl: ~`"\n  "`;

.test {
  property: @nl
    ~"one", @nl
    ~"two";
}

来源：https://stackoverflow.com/questions/21837567/on-input-of-long-escaped-property-value-in-less-how-to-split-it-to-a-newline

标签

less

newline