LESS CSS语法对modernizr很有用 [英] LESS CSS syntax useful for modernizr

问题描述

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

Usually I use modernizr to find out the browser abilities. Same time, I use LESS CSS to make my css more readable and maintainable. Common style using LESS nested rules looks like this:

#header {
  color: black;

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

$ b b

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

Then, if I use modernizr style fall-back, I add this text for previous block:

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

所以，它看起来像我有两个分支代码，并且每次我需要检查另一个兼容性方面，braches的数量将增长。这个代码不太容易维护，因为你必须找到应用于每个元素的所有样式，并且使用嵌套类获得的好处消失了。

So, it looks like I have two branches of code, and every time I need to check another compatability aspect the number of braches will grow. This code is less maintainable, because you have to find all the styles applied to every element, and the benefit we get using nested classes disappears.

问题：在LESS语法中有一种方法来包含这样的后退，而不是为.no-js和其他.no-smth启动一个新的代码分支？

The question: is there a way in LESS syntax to include such fall-backs and not starting a new code-branch for .no-js and other .no-smth classes?

推荐答案

现在可以使用& 这个问题很严重。以下语法应适用于 less.js ， lessphp 和无点：

You can now use the & operator to address this very problem. The following syntax should work in less.js, lessphp, and dotless:

b {
  a & {
    color: red;
  }
}

这被编译成：

a b { color:red; }

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

So, for the given example you could use the following syntax:

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

这篇关于LESS CSS语法对modernizr很有用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！