Question

我正在使用HAML / SASS开发Rails项目我正在尝试重构我的CSS代码。也许这只是一个品味问题，但我想拥有您对两种不同方法的看法：你经常使用多个CSS类，还是喜欢使用mixins？是否存在使用其中一个的性能问题？你们有些人同时使用这两种吗？如果是这样，你如何拆分代码？

例如：

多个班级

// index.html
<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

// style.css.sass
.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

混入

// index.html
<div id="box1"></div>
<div id="box2"></div>

// style.css.sass
@mixin square
    // ...
@mixin rounded
    // ...
@mixin red
    // ...
@mixin green
    // ...

#box1
    // Some properties
    // ...
    @include rounded
    @include red

#box2
    // Some properties
    // ...
    @include square
    @include green

Answer 1

第二个更快，因为浏览器看到更少的代码块

有了这个事实，ID选择器比类选择器更快，我选择第二个

编辑：

第一个也难以阅读和维护

Answer 2

正确的方法是extends。

的index.html

<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

style.css.sass

.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

#box1
  @extend .rounded
  @extend .red

#box2
  @extend .square
  @extend .red

您可以通过replacing the dot with percent阻止这些类出现在CSS中。

CSS重构：SASS Mixins vs Multiple class

2 个答案: