分组CSS类VS具有相同属性的性能时，单独的类 - SASS/SCSS实施

Question

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

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

} 

但SASS/SCSS等管理样式非常容易。 所以问题给出CSS性能考虑givent下面

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