SCSS 占位符以错误的顺序编译
SCSS Placeholders compiled in wrong order
我已经分叉 Zurb 的基金会以使用 SCSS %placeholder 选择器并避免在我的标记中使用列 类。
您可以看到 here 我是如何使用循环生成占位符的。问题是，当我扩展多个列占位符时，"small range" 一个在最后而不是第一个被编译（从而覆盖其他选择器）。
.main-menu-wrapper {
@extend %small-12;
@extend %medium-6;
@extend %large-6;
}
如果我在循环中上下移动中型或大型占位符，它们的编译顺序也会改变（如预期的那样）。然而，小的总是最后编译，不管它们放在哪里。我必须先编译它的唯一方法是创建一个单独的循环。
知道为什么会这样吗？
好的，我现在明白为什么小的最后编译了：它的数字更高。我需要为每个范围构建一个循环，以便在进入下一个范围之前先从 1 到 12 编译它们。否则，large-1 将在 small-2.
之前编译
我已经分叉 Zurb 的基金会以使用 SCSS %placeholder 选择器并避免在我的标记中使用列 类。
您可以看到 here 我是如何使用循环生成占位符的。问题是，当我扩展多个列占位符时，"small range" 一个在最后而不是第一个被编译（从而覆盖其他选择器）。
.main-menu-wrapper {
@extend %small-12;
@extend %medium-6;
@extend %large-6;
}
如果我在循环中上下移动中型或大型占位符，它们的编译顺序也会改变（如预期的那样）。然而，小的总是最后编译，不管它们放在哪里。我必须先编译它的唯一方法是创建一个单独的循环。
知道为什么会这样吗？
好的，我现在明白为什么小的最后编译了：它的数字更高。我需要为每个范围构建一个循环，以便在进入下一个范围之前先从 1 到 12 编译它们。否则，large-1 将在 small-2.