Question

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

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

}

但是使用SASS / SCSS等管理风格要容易得多。所以问题是CSS性能考虑因素给出了下面的mixin

@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。

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

1 个答案: