更少的CSS语法对现代化有用

Question

通常我使用 现代化 找出浏览器功能。同时，我使用 CSS少 使我的CSS更具可读性和可维护。使用较少嵌套规则的常见样式如下：

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

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

问题：是否有少的语法可以包括这样的秋季后卫，并且没有为.no-js和其他.no-smth类启动新的代码分支吗？

Answer 1

您现在可以使用 & 操作员解决这个问题。以下语法应在 少, 较少, ， 和 无点:

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

Answer 2

我想到的最好的方法是只为这些后备提供一个单独的。我认为这最终将容易管理，因此您不必为 .no-rgba 在很多地方。

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

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

我确实尝试提出一个解决方案，但我没有运气。