Div特定的元素样式

Question

如果我想为div中的元素设置样式，而不是说：

#divid input { ... }
#divid h1 { ... }

有没有办法说：

#divid {

  input: { ... }
  h1: { ... }

}

在进行编程的同时，第二种方法感觉“更好”，所以我只是想知道是否有可能以这种方式对元素定义进行分组？

Answer 1

您要描述的是使用CSS预处理器，例如SASS/SCSS。它的设计目的是通过允许类似这样的语法来清理CSS代码。在SCSS中，实际上是：

#divid {
  input { }
  h1 { }
}

这将解析为：

#divid input { }
#divid h1 {}

因此，您可以编写更整洁，更有条理的代码，并让预处理程序处理优化并重新构建为有效的CSS。

Answer 2

不是直接在CSS中。为此，您需要一个预处理器，它将与其他方便的东西一起使用-它们实际上都支持这种组织，包括：

• 较少：http://lesscss.org/
• 无礼：https://sass-lang.com/
• 手写笔：http://stylus-lang.com/

比较：https://raygun.com/blog/css-preprocessors-examples/，https://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout--net-24320等。（既然您知道这些术语，Google就是您的朋友。）

Answer 3

CSS不支持。另一方面，您可以使用Sass，您将需要编译为CSS。请访问链接中的网站以获取更多信息。