Question

使用诸如Modernizr之类的一些库，你可以在html标签中找到一些具有不同浏览器功能的类，例如，如果它不能进行css转换，则html标签会获得类no-csstransforms。我想要做的是为一个元素编写css属性并根据html类拆分它们，例如：

.my-element {

[SomethingThatCanSelectAparent]html.csstransforms & {
        // i can do transforms to this element
}
[SomethingThatCanSelectAparent]html.no-csstransforms & {
  /// whatever you want do for older browsers
}

}

我知道我可以从html.whaterver { .my-element }开始，但在大型网站上它会非常讨厌

我怎么能以这样干净的方式实现呢？

Answer 1

在SASS和LESS中你应该能够用这样的＆符号来完成这个：

.your-element {

  color: red;

  html.csstransforms & { color: blue; } 

}

这个的输出应该是：

.your-element { color: red; }
html.csstransforms .your-element { color: blue; }

修改

对不起，首先阅读错误的问题并给出了SASS答案，但是同样的情况也应该在LESS中有效。

Answer 2

你是对的，但你的做法有点奇怪。

这主要是因为CSS没有parent选择器，如<或其他东西。因此，你必须经典地垮掉（因为CSS就是这样），这意味着：

// Declaring the top of the DOM first
html.css-transforms {
    // Specific element when DOM has class x
    .my-element {
        // transformations!
    }
}

// And when the HTML has no such thing,
html.no-css-transforms {
    // Give this styling.
    my-element {
        // no transformations :(
    }
}

这会根据my-element代码的类将样式应用于html。

然而，可能utilizing the ampersand (&) with LESS.

.my-element {

    html.css-transforms & {
        // Magic css transforming
    }
}

LESS / CSS从元素声明中选择父元素

2 个答案: