嵌套的 css 规则

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3720844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:46:41  来源:igfitidea点击:

nested css rules

css

提问by M4N

Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:

前段时间我看到了一个 css 文件的例子,其中 css 规则/选择器以嵌套方式指定,例如这样的:

div.a {
  color: red;
  div.b {
    font-weight: bold;
  }
}

I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.

我不确定我在哪里看到的(可能是在一个 SO 问题中),或者它是否完全如上所示。

My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?

我的问题:上述 CSS 是否正确/有效?这是指定 CSS 规则的标准方法还是依赖于浏览器的 hack?

回答by BoltClock

That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSSor LESSand I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:

这不是有效的标准 CSS,但它是使用Sass/SCSSLESS嵌套类声明的一个例子,我相信其他 CSS 扩展在那里,在将它提供给浏览器之前将它扩展为这样的东西(这是有效的 CSS)使用:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}

回答by HoLyVieR

What you are probably referring to is LESS.

您可能指的是LESS

The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.

您给出的示例不是有效的 CSS,但对 LESS 有效。LESS 将“编译”嵌套的 CSS 并将其转换为有效的 CSS。

回答by meder omuraliev

You can nest rules with SASS, http://sass-lang.com/

你可以用 SASS 嵌套规则,http://sass-lang.com/

Maybe that was it?

也许就是这样?

回答by balupton

Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/

似乎有一个提案在https://tabatkins.github.io/specs/css-nesting/

but I can't find the status of it

但我找不到它的状态