css - 如何从重复 ID (css) 中缩短 css 代码

Question

如何缩短我的 CSS 代码？

HTML:

<div id="root">
    <p>Green</p>
    <h1>Blue</h1>
    <h3 class="brown">Brown</h3>
</div>

CSS:

#root p{ color:green; }

#root h1{ color:blue; }

#root .brown{ color:brown; }

我知道上面的代码工作正常。

但我可能只是在想是否有任何方法可以缩短上面的 css 代码。我尝试了这些(如下)但没有用。

#root{
  p{ color:green; },
  h1{ color:blue; },
  .brown{ color:brown; }
}

有人可以给我一个演示(codepen)来告诉我怎么做吗？需要你的帮助先生..

Answer 1

实际上你可以在 SASS 中做几乎完全一样的事情，就像你试图在 CSS 中缩短它一样，只是没有逗号

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

这里有官方指南的链接> https://sass-lang.com/guide