Skip to content

Instantly share code, notes, and snippets.

@alecperkins

alecperkins/actual_main.css

Last active December 18, 2015 05:29
Show Gist options
  • Save alecperkins/5733335 to your computer and use it in GitHub Desktop.
Save alecperkins/5733335 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
actual_main.css
.Image, .Text {
border: 1px solid red;
}
.Image {
border-color: green;
}
.Image, .Text {
border: 1px solid red;
}
.Text {
border-color: blue;
}
Raw
ideal_main.css
.Image, .Text {
border: 1px solid red;
}
.Image {
border-color: green;
}
.Text {
border-color: blue;
}
Raw
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'
@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