'when' 没有类名的语句

Question

我正在尝试使用 'when' 语句，而不是将其放在 class 上，如下所示：

尝试 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 将无法编译它，您最终会得到以下错误：

Parse error: Unrecognised input

尝试 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 中设置的变量永远不会实际设置，编译器会给出以下错误：

Name error: variable @screen-xs is undefined

如果你像下面的代码片段那样调用 mixin，它会工作得很好：

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

尝试 4： 这又是行不通的，因为您实际上从未调用未命名命名空间中的混入。

@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() 等中重用等来进一步简化它）

'when' 没有类名的语句

'when' statement without classname

less

twitter-bootstrap