Last active
December 25, 2015 14:49
-
-
Save MoOx/6993341 to your computer and use it in GitHub Desktop.
Does @at-root worth it?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.org-Component { | |
} | |
.org-Component-subChild { | |
} | |
.org-Component-subChild--modifier { | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#318 | |
.org { | |
#{&}-Component { | |
#{&}-subChild { | |
#{&}--modifier { | |
} | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.org { | |
@at-root #{&}-Component { | |
@at-root #{&}-subChild { | |
@at-root #{&}--modifier { | |
} | |
} | |
} | |
}} |
Disadvantages of this is it makes Find All really difficult. When I am a new developer on a particular project, I rely heavily on Find All to tell me if pieces of code are still being used in the codebase or used elsewhere or just to find where they're declared within a file structure I'm not yet used to.
If I saw class="org-Component-subChild--modifier"
in the markup then I would search for org-Component-subChild--modifier
and find nothing. This might make me think it's not being used and I would clean up the markup referencing it, or if I am sure it is being used, it makes finding the declaration more difficult than necessary.
Although this approach looks neat and saves some typing, I feel quite strongly against it.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Your idea with pre Sass 3.3 doesn't work as you wished. I copied your code into Sassmeister, that's what I got:
So, if you like BEM-syntax - which I don't - then the next Sass-release will possibly be great for you.