html - 分组 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 .