SCSS占位符以错误的顺序编译 [英] SCSS Placeholders compiled in wrong order

问题描述

我已经分叉了 Zurb's Foundation 以使用 SCSS %placeholder 选择器并避免在我的标记中使用列类.

I have forked Zurb's Foundation to use SCSS %placeholder selectors and avoid using column classes in my markup.

您可以在此处了解我如何使用循环生成占位符.问题是，当我扩展多个列占位符时，小范围"占位符会在最后而不是首先编译(从而覆盖其他选择器).

You can see here how I generate the placeholders using loops. The thing is, when I extend multiple column placeholders, the "small range" one is compiled at the end instead of first (thus overriding the other selectors).

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

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

If I move the medium or large placeholders up and down in the loop, their compile order is changed too (as expected). However, the small ones are always compiled last, no matter where they are placed. The only way I have to make it compile first is to create a separate loop.

知道为什么会发生这种情况吗?

Any ideas why this happens?

推荐答案

好的，我现在明白为什么小程序最后编译了:它的数量更高.我需要为每个范围构建一个循环，以便在步进到下一个范围之前首先从 1 到 12 编译它们.否则，large-1 将在 small-2 之前编译.

Ok, I now realize it's obvious why the small one is compiled last: its number is higher. I need to build a loop for each of the ranges so they are compiled first from 1 to 12 BEFORE stepping to the next range. Otherwise, large-1 is going to be compiled before small-2.

这篇关于SCSS占位符以错误的顺序编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！