I'm looking for functionality in LESS to be able to change one variable and have it change a bunch of different variables so that I can change my compile target and have it easily change a ton of variables.
Here's an example of what I'm looking for. The only problem is that that because I redefine @img
inside .compile_for_if
it's in another scope.
@compile_for: "endpoint1";
@img_endpoint1: "./myImg.png";
@img_endpoint2: "https://somewhere.com/myImg.png";
@img: "./default.png";
.compile_for_if
{
& when (@compile_for = "endpoint1")
{
@img: @img_endpoint1;
}
& when (@compile_for = "endpoint2")
{
@img: @img_endpoint2;
}
}
... somewhere else ...
.img
{
background-image:url("@{img}");
}
You can achieve this by using enclosing all your rules within a nameless namespace ( &{...}
) and then calling your .compile_for_if
mixin within its scope. This would expose all variables set within the .compile_for_if
into the namespace and thereby all rules will be able to access it. ( Note: You would have to change your .compile_for_if
definition also like given below.)
@compile_for: "endpoint1";
@img_endpoint1: "./myImg.png";
@img_endpoint2: "https://somewhere.com/myImg.png";
@img: "./default.png";
/* Added another set of conditional variables to illustrate */
@padding1: 10px;
@padding2: 20px;
@padding: 5px;
.compile_for_if when (@compile_for = "endpoint1"){
@img: @img_endpoint1;
@padding: @padding1;
}
.compile_for_if when (@compile_for = "endpoint2"){
@img: @img_endpoint2;
@padding: @padding2;
}
&{
.compile_for_if();
.img{
background-image:url("@{img}");
}
div{
padding: @padding;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.