较少CSS语法对modernizr有用

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:

通常我使用modernizr来找出浏览器的能力。同时,我使用LESS CSS使我的css更具可读性和可维护性。使用LESS嵌套规则的常见样式如下所示:

#header {
  color: black;

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

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

然后,如果我使用modernizr样式回退,我将为前一个块添加此文本:

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

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.

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

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语法中是否有一种方法可以包含这样的后备并且不为.no-js和其他.no-smth类启动新的代码分支?

2 个解决方案

#1

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

您现在可以使用&运算符来解决这个问题。以下语法应该在less.js,lessphp和dotless中起作用:

b {
  a & {
    color: red;
  }
}

This is compiled into:

这被编译成:

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

... which would be compiled into:

......将编译成:

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

#2

The best way I can think to approach it is to just have a separate .less file for these fallbacks. I think this would end up much easier to manage so you don't have to peck around for .no-rgba in lots of places.

我能想到的最好的方法是为这些后备提供一个单独的.less文件。我认为这样会更容易管理,所以你不必在很多地方啄食.no-rgba。

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

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

I did try coming up with a solution how you wanted it but I had no luck.

我确实尝试了解你想要的解决方案,但我没有运气。

#1