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

Question

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

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

}

但是使用 SASS/SCSS 等管理样式要容易得多。 所以问题是考虑到下面的 mixin 的 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。