concatenate values in less (css) without a space
One solution, although a little ugly, would be to used escaped strings:
@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"
Note you need less.js v1.1.x for this.
Concatenate String in LESS in loop
You could try passing another attribute to the mixin ... like this, where I added to your code the @t1 to the arguments and define the @t2 in the loop, and pass it on. Now you'll be writing to a variable only in the scope of one loop step, and not trying to overwrite the same variable over again in the recursion (does not agree with less). So this is your code, that should not get the error you mention anymore:
@test: "";
.populateGridClasses4 (@index, @interval, @t1) when (@index > 0) {
@num: @index * @interval;
@ntest: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
@t2: ~"@{t1}@{ntest}";
.populateGridClasses4(@index - 1, @interval,@t2);
}
.populateGridClasses4 (0, @interval,@t1) {}
.populateGridClasses4(20, 5, @test);
@{t2} {
padding-left: 1px;
}
Also you need use ~ for class interpolation, not to return the class names between quotation marks.
Edit: The above will only work in 1.3.3, but for your approach to work in 1.4 you need to tweak it a little. Also I noticed that the way you were joining the strings did not add commas between class names of each loop, so I added another step here, this should now do the right thing in1.4 and previous versions of LESS.
.populateGridClasses4(1,@num,@t1) {
@test: ~"@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
}
.populateGridClasses4(@index, @interval, @t1) when (@index > 1) {
@num: (@index * @interval);
@t2: "@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1),@interval,@t2);
}
.populateGridClasses4(@index,@interval) {
@num: (@index * @interval);
@t2: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1), @interval, @t2);
}
.populateGridClasses4(20, 5);
@{test} { padding-left: 1px; }
the output CSS is:
.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100, .eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95, .eh-grid-90, .eh-mobile-grid-90, .eh-tablet-grid-90, .eh-grid-85, .eh-mobile-grid-85, .eh-tablet-grid-85, .eh-grid-80, .eh-mobile-grid-80, .eh-tablet-grid-80, .eh-grid-75, .eh-mobile-grid-75, .eh-tablet-grid-75, .eh-grid-70, .eh-mobile-grid-70, .eh-tablet-grid-70, .eh-grid-65, .eh-mobile-grid-65, .eh-tablet-grid-65, .eh-grid-60, .eh-mobile-grid-60, .eh-tablet-grid-60, .eh-grid-55, .eh-mobile-grid-55, .eh-tablet-grid-55, .eh-grid-50, .eh-mobile-grid-50, .eh-tablet-grid-50, .eh-grid-45, .eh-mobile-grid-45, .eh-tablet-grid-45, .eh-grid-40, .eh-mobile-grid-40, .eh-tablet-grid-40, .eh-grid-35, .eh-mobile-grid-35, .eh-tablet-grid-35, .eh-grid-30, .eh-mobile-grid-30, .eh-tablet-grid-30, .eh-grid-25, .eh-mobile-grid-25, .eh-tablet-grid-25, .eh-grid-20, .eh-mobile-grid-20, .eh-tablet-grid-20, .eh-grid-15, .eh-mobile-grid-15, .eh-tablet-grid-15, .eh-grid-10, .eh-mobile-grid-10, .eh-tablet-grid-10, .eh-grid-5, .eh-mobile-grid-5, .eh-tablet-grid-5 {
padding-left: 1px;
}
Less adds unexpected space to variable
Note: As mentioned by seven-phases-max in his comments to the question, this was a bug which has already been fixed in v2.x. Leaving this answer (with the work-around solution) as-is to help future readers who can't upgrade their compiler for whatever reason.
The problem happens only for selectors which use selector interpolation and are nested within one or more parent selectors. It can be solved by using a temporary variable which contains the pseudo-selector like below: (it uses escaped string feature)
Option 1:
ul {
li {
@selector: ~":nth-child(@{domaincount})"; /* the selector is formed here */
&@{selector} { /* and used here */
background-color: @domaincolor;
a {
border-bottom: 5px solid;
color: white !important;
}
}
}
}
Option 2:
li {
@count: ~"(@{domaincount})";
&:nth-child@{count} { /* and used here */
background-color: @domaincolor;
a {
border-bottom: 5px solid;
color: white !important;
}
}
}
Sample Compiled Output:
body.domain-a-local #block-domain-switcher ul li:nth-child(1) {
background-color: #018f9e;
}
Related Links:
- concatenate values in less (css) without a space
- Redudant space in interpolated selectors like nth(...)
As mentioned above and in the linked issue thread, the issue happens only when the selector is formed using selector interpolation and is nested under one or more parents.
This works
// Variables
@list: a 1;
@num: extract(@list, 2);
// Usage
body div:nth-child(@{num}) {
color: #444;
}
But this doesnt
// Variables
@list: a 1;
@num: extract(@list, 2);
// Usage
body {
div:nth-child(@{num}) {
color: #444;
}
}
Can't seem to concatenate two variables in LESS
I realize from the comments you were directed to an answer that helped. Just to clarify why your original solution did not work, it was because you did not have the variables defined as strings. You needed this (note quotes around your strings):
p {
@a: "inset 0 1px 1px rgba(0, 0, 0, 0.075)";
@b: "0 0 8px rgba(82, 168, 236, 0.6)";
box-shadow: ~"@{a}, @{b}";
}
LESS variable self concatenation
Yes, essentially, it is possible, though not on the same scope. I've ended up with recursive approach like this
.concat-test {
.concat(@rest...) {
._concat(@i, @result, @rest...) {
@var: extract(@rest, @i);
.-() when (@i > length(@rest)) {
@concat: @result;
}
.-() when (default()) {
._concat(@i+1, ~"@{result}@{var}", @rest);
}
.-();
}
._concat(1, "", @rest);
}
@a:a;
@b:b;
@c:c;
.concat(@a, @b, @c, @b, @a);
concat: @concat;
}
Related Topics
CSS Fixed Position with Auto Margin
How to Style an Anchor Tag to Look Like a Button with the Same Height as the Button
Why Do I Have to Put Media Queries at the Bottom of the Stylesheet
Styling Checkboxes, Radio Buttons and Dropdowns
Text Blurry After 3D Transform
How to Make CSS Animation to Play Every 10 Seconds
Using CSS3Pie Htc for Border-Radius in IE8
Redundant CSS Rules Ie Float & Display:Block
CSS Display: Inline-Block Does Not Accept Margin-Top
How to Keep Aspect Ratio of a Background-Image
How to Use Font-Weight with Font-Face Fonts
Handling CSS Id and Classes with Spaces
Why Shouldn't I Use Id Selectors in CSS
What Are the Difference Between Col-Lg and Col-Md in Bootstrap3
How to Display a List in Two Rows
How to Change the Border/Outline Color for Input and Textarea Elements in Twitter Bootstrap