Concatenate strings in Less
Use Variable Interpolation:
@url: "@{root}@{file}";
Full code:
@root: "../img/";
@file: "test.css";
@url: "@{root}@{file}";
.px{ background-image: url(@url); }
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;
}
Concatenate String for class name in LESS
What you are looking for is called selector interpolation ... you can find it here: http://lesscss.org/#-selector-interpolation
Your mixin would need to look like this for it to work:
.myPL( @val ) {
.pL@{val} {
padding-left: @val;
}
}
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;
}
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}";
}
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.
Python: How to concatenate adjacent strings in list having combined length less than threshold?
import re
import textwrap
sample = ['This', 'is', 'a', 'sample', 'example', 'stringbiggerthan10', 'otherstring']
sample_join = " ".join(sample)
textwrap.wrap(sample_join, width=10, break_long_words=False)
['This is a', 'sample', 'example', 'stringbiggerthan10', 'otherstring']
Related Topics
Div with Cut Out Edges, Border and Transparent Background
Background-Size with Svg Squished in IE9-10
Vertical Align Table-Cell Don't Work with Position Absolute
CSS @Font-Face Not Working in IE8
Bug in CSS3 Rotatey Transition on Safari
iPhone Web App - Stop Body Scrolling
How to Change the Text Color of First Select Option
Add Ellipses to Overflowing Text in Svg
Changing an Input's HTML5 Placeholder Color with CSS Does Not Work on Chrome
Are Alternate Nested Styles Possible in CSS
CSS Display: Table Min-Height Not Working
Less CSS: Abusing the & Operator When Nesting
Less Mixin a Variable Class Name
What Is the Purpose of This Purple Dashed Line Area