0

以前没有 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%;   
}
4

1 回答 1

0

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

在 CSS 中一遍又一遍地编写相同的东西会使文件更大......更大的文件管理器 = 加载和渲染的时间更长。通常我们应该尽量避免冗余。

但我认为，结构主要取决于整个文件的组织方式......以及您还想对相同的类做什么。

您还可以查看@extend，您可以通过执行以下操作来实现相同的目的：

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

但正如我所说...这一切都取决于您想要对事物执行的操作...以及您希望规则如何继承属性。

最后，预处理器主要是为了让您更轻松地设置样式。

编辑：对于 CSS 性能测试，您可以尝试Andy 的压力测试。

于 2013-05-13T14:29:01.290 回答