CSS output / Silent classes

[demrks]

If you use silent classes, SASS outputs strange CSS (http://codepen.io/anon/pen/CuFsE)

I created three divs (.test1, .test2, .test3) and applied some silent classes to them:

<div class="test1">
    <div class="test1__item"></div>
</div>
<div class="test2">
    <div class="test2__item"></div>
</div>
<div class="test3">
    <div class="test3__item"></div>
</div>

The CSS output looks like this:

.test2 > .test1__item, .test2 > .test2__item, .test2 > .test3__item { }

If you have a look at the Code (Codepen) you might notice ".test2 > .test1__item" and ".test2 > .test3__item" don't exist (and won't exist in future). I know why this happens (SASS doesn't know my HTML structure), but i'm wondering if there is a "fix" or at least a workaround? The only workaround i can think of is using silent classes only for widths, pull and push classes and use a HTML structure like this instead

<div class="grid test1">
    <div class="grid__item test1__item"></div>
</div>
<div class="grid grid--bottom test2">
    <div class="grid__item test2__item"></div>
</div>
<div class="grid--middle test3">
    <div class="grid__item test3__item"></div>
</div>

This could work, but probably this is a known issue and somebody came up with a better workaround.

Thanks in advance

[mikehdt]

Although not a perfect solution, you could try nesting your generation of the items inside each appropriate parent class to restrict Sass just a little. It does seem to get a little confused with the direct > parenting generation.

However, what Sass is doing seems to be generally correct - you have X parents and Y children, so it has to generate for all possibilities.

[demrks]

Thanks, i will give it a try. I also came up with a different approach which could work. I'll try to get rid of most of those parent selectors and use silent classes like "%grid__item--bottom" (rather than "%grid--bottom") and so on. That way Sass doesn't have to generate for all possibilities, but just one.