如何从重复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的链接

Answer 2

例如，您可以使用SASS实现这一目标。

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

你可以在这里测试一下，看看它是否正常工作：https://www.sassmeister.com/

到这里了解如何在您的项目中安装它：https://sass-lang.com/install

这就是它在css中的样子，但是使用SASS

Answer 3

您可以将css嵌套在SCSS中，如下所示，父选择器在外面，在我们的例子中它是#root，在它的花括号中，我们可以声明#root的子选择器。

使用node-sass将sass文件编译为css

SCSS

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

编译CSS

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

Answer 4

就像其他评论中提到的那样，SASS非常适合编写嵌套的CSS声明。请注意它是一个预处理器，因此将编译最终的CSS代码。我的猜测是这个sass代码的结果：

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

将导致您的示例作为输出。

只是这样说，因为知道最终文件不一定要小一点很重要。

Answer 5

我的答案和你的问题一样具有描述性。干得好：

p{color:#0f0}h1{color:#00f}.brown{color:brown}

;)