如果生成目标的语句较少

Question

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}");
}

Answer 1

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;
  }
}