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 variable with string to form another variable
background: @{color-@{color}};
is not valid Less syntax, the proper one would be:
background: ~'@{color-@{color}}';
Note however, the very idea of indirectly refering to a variable values via escaping is a durty kludge (quite wide-spread but still very dirty).
It works when you assign such value directly to CSS property, but it will fail for anything else, simply because such value is not a color anymore but an unquoted string with an unknown content...
E.g. the following code will fail:
@color-dark-purple: #321;
div {
@color: 'color-dark-purple';
background: fade(~'@{color}', 50%); // error, not a color value
}
The proper Less method of getting a variable value via its name is "variable reference", e.g.:
@color-dark-purple: #321;
div {
@color: 'color-dark-purple';
background: fade(@@color, 50%); // OK, proper color value
}
Additionally, take a time to consider if the whole approach of having all these colors as distinct variables and then having a separate list of these variables names is really what you need. Normally a single list having both color names and values is not such awfully bloating and much more maintainable.
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 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 a variable and a string to reference another variable in LESS
There are two things that need to be addressed here:
- When we assign a color name to a variable, Less would by default convert it to the
hex
value in earlier versions of the compiler, so it is better to use the value within quotes to make Less realize it is a String and not a Color. This issue has now been addressed and so if you are using a newer version of Less compiler, this step might probably not be required. - We have to form the derived variable's name by concatenating the number to the
@Base
variable's value and then evaluate it.
Putting both together, the below code should work:
@Yellow-100: #fff;
@Page-Background: ~"@{Base}-100"; /* this will form the variable name */
@Base: "Yellow";
a{
background: @@Page-Background;
/*using double @ references the variable whose name is contained in @Page-Background */
}
Related Topics
How to Increase the Bullet Size in a Li
Css3 Transitions: Is There an on Click Option Without Using Jquery
Why Isn't :Nth-Child Working in IE9
Add HTML Tag Inside CSS Content Property
Achieving This Hr Element with CSS Styling - Pseudo Elements
Is the 'Frosted Glass' Effect Implementable with CSS Only at This Time
How to Add Badge on Top of Font Awesome Symbol
What Is Difference Between CSS Em and Ch Units
Cssrules/Rules Are Null in Chrome
Create a Radial Gradient for Internet Explorer 6/7/8
Using Props to Set '&:Hover' Background-Color
Why Does My Font Look Much Better in IE9
CSS - CSS Coding That I Have Never Seen
How to Force a Website to Be in Landscape Mode When Viewed on a Mobile Device