Question

我试图使用＆＃39;当＆＃39;声明，没有把它放在一个类，如下：

尝试1：

@responsive: false;
when (@responsive = false) {
  @screen-xs:                                   0px;
  @screen-sm:                                   0px;
  @screen-md:                                   0px;
  @screen-lg:                                   0px;
}

不知怎的，这不起作用。我如何正常工作？

尝试2：这不起作用：

@responsive:                                false;
@screen-xs:                                 (0px) when (@responsive = false);
@screen-sm:                                 (0px) when (@responsive = false);
@screen-md:                                 (0px) when (@responsive = false);
@screen-lg:                                 (0px) when (@responsive = false);

尝试3：这不起作用：

@responsive:                                false;
.container when ( @responsive = true ) {
  @screen-xs:                                   480px;
  @screen-sm:                                   768px;
  @screen-md:                                   992px;
  @screen-lg:                                   1200px;
}
.container when ( @responsive = false ) {
  @screen-xs:                                   0px;
  @screen-sm:                                   0px;
  @screen-md:                                   0px;
 @screen-lg:                                    0px;
}

尝试4：这也不起作用：

@responsive:                                false;
.res {
  @screen-xs:                                   480px;
  @screen-sm:                                   768px;
  @screen-md:                                   992px;
  @screen-lg:                                   1200px;
};
& when (@responsive = false) {
  .res {
    @screen-xs:                                 0px !important;
    @screen-sm:                                 0px !important;
    @screen-md:                                 0px !important;
    @screen-lg:                                 0px !important;
  };
}
.res();

尝试5：这不起作用：

@responsive:                                false;
@screen-xs-breakpoint:                      480px;
@screen-sm-breakpoint:                      768px;
@screen-md-breakpoint:                      992px;
@screen-lg-breakpoint:                      1200px;
& when (@responsive = false) {
    @screen-xs-breakpoint:                  0px;
    @screen-sm-breakpoint:                  0px;
    @screen-md-breakpoint:                  0px;
    @screen-lg-breakpoint:                  0px;
}
@screen-xs:                                 @screen-xs-breakpoint;
@screen-sm:                                 @screen-sm-breakpoint;
@screen-md:                                 @screen-md-breakpoint;
@screen-lg:                                 @screen-lg-breakpoint;

Answer 1

尝试1：以下代码不起作用，因为需要将警卫连接到选择器。如果没有特定的选择器，您可以使用&作为未命名的命名空间。

@responsive: false;

when (@responsive = false) {
  @screen-xs: 0px;
}

没有任何选择器，Less不能编译它，你最终会收到以下错误：

解析错误：无法识别的输入

尝试2：由于与上述相同的原因，这也会失败。防护装置只能用于选择器，而不能用于变量。

@responsive: false;
@screen-xs: (0px) when (@responsive = false);

尝试3：这应该有效，但我只能假设你没有在任何地方调用mixin。

@responsive: true;
.container when ( @responsive = true ) {
    @screen-xs: 480px;
}
.container when ( @responsive = false ) {
    @screen-xs: 0px;
}

当你不调用mixin时，mixin中设置的变量从未实际设置，编译器会给出以下错误：

名称错误：变量@ screen-xs未定义

如果你在下面的代码片段中调用了mixin，它会工作得很好：

&{
  .container();
  #div1{
    width: @screen-xs;
  }
}

尝试4：这再次无效，因为您实际上从未调用未命名命名空间中的mixin。

@responsive: true;
.res {
    @screen-xs: 480px;
}
& when (@responsive = false) {
  .res {
    @screen-xs: 0px !important;
  }
}

建议的解决方案：以下是我建议您处理案例的方法。

@background: white;
@screen-xs: 480px;

.responsive(@responsive) when (@responsive = true){
  @background: blue;
  @screen-xs: 240px;
}
.responsive(@responsive) when (@responsive = false){
  @background: red;
  @screen-xs: 120px;
}

&{ /* unnamed namespace is required because the mixin that sets the value should be called within the same scope */
  .responsive(@responsive);
  #div1{
    background: @background;
  }
  #div2{
    width: @screen-xs;
  }
}

@responsive: true;

Answer 2

对于特定的Bootstrap问题（在@Harry的答案评论中释放出来（尽可能涵盖了总是推荐的解决方案）），这里有一些技巧可以根据你实际编译CSS的方式而适合。

首先，您可以将@responsive从布尔值更改为允许直接更改变量的内容，例如：

@responsive: 0; // 1 for responsive and 0 otherwise
@screen-xs:  (480px * @responsive);
@screen-sm:  (768px * @responsive);
@screen-md:  (992px * @responsive);
@screen-lg: (1200px * @responsive);

没有条件 - 没有眼泪;）

显然，并不总是可以使用上面的简化，所以这里是其他解决方案（它们看起来比上面的建议更复杂，但通常使用它们来对抗非模块化配置 - 通过在某些框架中使用的全局变量模式）：

首先，因为你显然没有同时编译这些Bootstrap主题，实际上甚至没有必要让所有这些东西出现在同一个文件中，即最直接的解决方案只是创建两个独立的主要要编译的文件，例如：

// my-responsive-bootstrap.less:

@import "bootstrap.less";
@import "whatever-else-you-need-to-import.less";

@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

和

// my-non-responsive-bootstrap.less:

@import "bootstrap.less";
@import "whatever-else-you-need-to-import.less";

@screen-xs: 0px;
@screen-sm: 0px;
@screen-md: 0px;
@screen-lg: 0px;

就是这样（重点是你已经拥有并在编译时应用你的条件，所以在代码中复制相同的条件根本没有意义。）

当然，我们仍然需要在附近出现类似的代码以便于维护，因此可以将上述两个文件再次合并为一个：

.responsive(true); // true or false

.responsive(true) {
    @import (multiple) "bootstrap.less";
    // @import (multiple) "whatever-else-you-need-to-import.less";
    // ...

    @screen-xs:  480px;
    @screen-sm:  768px;
    @screen-md:  992px;
    @screen-lg: 1200px;
}

.responsive(false) {
    @import (multiple) "bootstrap.less";
    // @import (multiple) "whatever-else-you-need-to-import.less";
    // ...

    @screen-xs: 0px;
    @screen-sm: 0px;
    @screen-md: 0px;
    @screen-lg: 0px;
}

瞧。（此外，通过将相同的导入组合到另一个mixin（或其他文件）中以便在.responsive()等中重复使用，可以更加简化它。）

＆＃39;当＆＃39;没有classname的语句

2 个答案: