如果生成目標的語句較少

Question

我正在尋找LESS中的功能，以便能夠更改一個變量並使它更改許多不同的變量，以便我可以更改編譯目標並使其輕松更改大量變量。

這是我要尋找的示例。 唯一的問題是，因為我在.compile_for_if重新定義了@img ， .compile_for_if它在另一個作用域中。

@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

您可以通過將所有規則包含在無名命名空間（ &{...} ）中，然后在其范圍內調用.compile_for_if mixin來實現此目的。 這會將.compile_for_if設置的所有變量都暴露給名稱空間，因此所有規則都將能夠訪問它。 （ 注意：您還必須更改.compile_for_if定義，如下所示。）

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