css - 对 modernizr 有用的 LESS CSS 语法

Question

通常我使用modernizr来了解浏览器的功能。同时，我使用LESS CSS使我的 CSS 更具可读性和可维护性。使用 LESS 嵌套规则的常见样式如下所示：

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

然后，如果我使用modernizr 风格的后备，我为前一个块添加这个文本：

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

所以，看起来我有两个代码分支，每次我需要检查另一个兼容性方面时，分支的数量都会增加。这段代码的可维护性较差，因为您必须找到应用于每个元素的所有样式，而我们使用嵌套类获得的好处就消失了。

问题：有没有办法在 LESS 语法中包含这样的后备，而不是为 .no-js 和其他 .no-smth 类启动新的代码分支？

score 20 · Accepted Answer

您现在可以使用&运算符来解决这个问题。以下语法应该适用于less.js、lessphp和dotless：

b {
  a & {
    color: red;
  }
}

这被编译成：

a b { color:red; }

因此，对于给定的示例，您可以使用以下语法：

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

...这将被编译成：

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

score 1 · Accepted Answer

我能想到的最好方法就是为这些后备提供一个单独的 .less 文件。我认为这最终会更容易管理，因此您不必.no-rgba在很多地方四处寻找。

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

我确实尝试过想出一个你想要的解决方案，但我没有运气。

2 回答 2