SCSS占位符编译顺序错误

Question

我已经将Zurb的基础分支用于使用SCSS％占位符选择器，并避免在我的标记中使用列类。

您可以看到here如何使用循环生成占位符。问题是，当我扩展多个列占位符时，“小范围”一个在最后编译而不是第一个（从而覆盖其他选择器）。

.main-menu-wrapper { @extend %small-12; @extend %medium-6; @extend %large-6; }

如果我在循环中上下移动中型或大型占位符，它们的编译顺序也会改变（如预期的那样）。但是，小的总是最后编译，无论它们放在何处。我必须首先编译它的唯一方法是创建一个单独的循环。

为什么会发生这种情况？

Answer 1

好的，我现在意识到为什么最后编译小编的原因很明显：它的编号更高。我需要为每个范围构建一个循环，以便在步进到下一个范围之前首先从1到12编译它们。否则，large-1将在small-2之前编译。