Ideal Sass structure. Given `structure.md`, I wish the output would look like `ideal_main.css`. However, since `Block` gets imported twice and is a placeholder, not just something to extend, the rewritten selectors end up repeated. Getting around this requires `Feature/index.sass` to import `Block` instead of the ones that require it. Unfortunat…

actual_main.css

.Image, .Text {
    border: 1px solid red;
}
.Image {
    border-color: green;
}
.Image, .Text {
    border: 1px solid red;
}
.Text {
    border-color: blue;
}

ideal_main.css

.Image, .Text {
    border: 1px solid red;
}
.Image {
    border-color: green;
}
.Text {
    border-color: blue;
}

structure.md

• input/

  • Feature/

    • index.sass

        @import 'Image'
        @import 'Text'
      

    • _Block.sass

        %Block
            border: 1px solid red
      

    • Text.sass

        @import 'Block'
        .Text
            @extends %Block
            border-color: blue
      

    • Image.sass

        @import 'Block'
        .Image
            @extends %Block
            border-color: green
      

  • Core/

    • main.sass

        @import '../Feature/index.sass'
      

Perhaps %placeholder selectors should only appear when first imported? Tricky to reconcile with the cascading nature of CSS and behavior of @import.

Alternatively, a @require that works like @import, but only inserts placeholders in the output the first time they are required? This way, @import still semantically is a CSS import, “include this code here”, while @require says “make sure this is loaded”.

Lots of previous discussion, apparently:

• sass/sass#139
• sass/sass#156
• sass/sass#320