较少CSS语法对modernizr有用

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类启动新的代码分支？

Answer 1

您现在可以使用&运算符来解决此问题.以下语法应该在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;
}