html - 具有相同属性的CSS类与单个类进行分组性能-SASS/SCSS实现

Question

以前没有SASS，如果类共享相同的CSS属性，则按以下方式将它们分组会更容易

.header, .content, .footer {
   height:100%;

}

但是使用SASS / SCSS等管理样式要容易得多。
因此，下面的混合给出了CSS性能考虑的问题

@mixin sameHeight{  
   height:100%;
}

实施应该

.content {
  @include sameHeight; 
}

.footer {
  @include sameHeight; 
}

.header {
  @include sameHeight; 
}

/* CSS OUTPUT */

  .header {
       height:100%;

 }

  .content{
       height:100%;
 }

  .footer{
       height:100%;
 }

还是应该

.header, .content, .footer {
   @include sameHeight; 

}

/* CSS OUTPUT */
.header, .content, .footer {
       height:100%;   
}

Answer 1

我不确定性能差异，不同的结构并没有真正改变服务器上的性能，您可能必须自己进行测试。

一遍又一遍地用CSS编写同一件事将使文件变大，而文件管理器大=加载和渲染的时间更长。通常，我们应该尝试避免裁员。

但是，我认为结构主要取决于整个文件的组织方式……以及您要对同一类进行的其他操作。

您还可以查看@extend，通过执行类似的操作可以达到相同的目的：

@mixin sameHeight{  
   height:100%;
}
.header {
   @include sameHeight; 
}
.content {
   @extend .header;
}
.footer {
   @extend .content;
}

但是就像我说的那样……这完全取决于您要对事物执行的操作……以及您希望规则如何继承属性。

最后，大多数预处理器都在那儿，使您可以轻松地设置样式。

编辑：对于CSS性能测试，您可以尝试Andy's stress test。