css - SCSS 占位符以错误的顺序编译

Question

我已经 fork Zurb 的基金会以使用 SCSS %placeholder 选择器并避免在我的标记中使用列类。

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

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


如果我在循环中上下移动中型或大型占位符，它们的编译顺序也会改变(如预期的那样)。然而，小的总是最后编译，不管它们放在哪里。我必须先编译它的唯一方法是创建一个单独的循环。

知道为什么会这样吗？

Answer 1

好吧，我现在意识到为什么小的最后编译是显而易见的:它的数字更大。我需要为每个范围构建一个循环，以便在进入下一个范围之前先从 1 到 12 编译它们。否则，large-1 将在 small-2 之前编译。