在样式表中使用 mixins 还是组合样式集更好？

Question

我想知道哪种编码样式表的方式在性能、可读性和日常用例方面更好。

假设我们要制作样式：

.container {
  background-color: red;
  .nested-container {
    color: blue;
  }
}

.container-two {
  background-color: black;
  .nested-container {
    color: blue;
  }
}

我想知道这种情况下哪种方式更有效。

/* mixins way */
@mixin duplicated-container {
  .nested-container {
      color: blue;
  }
}

.container {
  background-color: red;
  @include duplicated-container;
}
.container-two {
  background-color: black;
  @include duplicated-container;
}

/* combined sets way */
.container {
    background-color: red;
}
.container-two {
    background-color: black;
}
.container,
.container-two {
  .nested-container {
    color: blue;
  }
}

第一种方式更具可读性，至少对我而言。第二种方式使输出文件比使用 mixins 时更小，因为代码不会以任何方式重复。

请记住，这只是我想要实现的非常简单的示例，如果 container 和 container-two 位于文件中的两个不同位置，第一种方式使其非常易读并且很容易玩，但是它在最终输出中重复了代码，所以我不确定这样使用 mixins 是否好。

这几天一直困扰着我，我决定向专业人士寻求帮助，因为我总是以凌乱的样式表告终。我感谢所有帮助。

Answer 1

第一个似乎是更好的选择，因为 类列在一个地方。

使用第二种方法，添加 .container-three 后，您还必须记住将其添加到类的列表中，.nested-container 从中获取其样式.

使用 mixins 时，您不必担心文件大小。大多数服务器默认使用 CSS 压缩器和 gzip 内容的现代管道，复制 CSS 中的内容不会显着增加文件大小，并且 might even perform better.

不用担心重复代码。这是一个微优化，无论如何都会被 gzip 大量优化。在这种情况下追求可读性。

在样式表中使用 mixins 还是组合样式集更好？

Is it better to use mixins or combined sets of styles in stylesheets?

css

nested

sass

mixins