Skip to content

Instantly share code, notes, and snippets.

@alecperkins
Last active December 18, 2015 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alecperkins/5733335 to your computer and use it in GitHub Desktop.
Save alecperkins/5733335 to your computer and use it in GitHub Desktop.
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…
.Image, .Text {
border: 1px solid red;
}
.Image {
border-color: green;
}
.Image, .Text {
border: 1px solid red;
}
.Text {
border-color: blue;
}
.Image, .Text {
border: 1px solid red;
}
.Image {
border-color: green;
}
.Text {
border-color: blue;
}
  • 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'
        
@alecperkins
Copy link
Author

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”.

@alecperkins
Copy link
Author

Lots of previous discussion, apparently:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment