Last active
June 16, 2016 21:30
-
-
Save djadriano/5cf6c1fd2e7857271dfebaa9f22c6d6d to your computer and use it in GitHub Desktop.
Sass mixins to generate classes in SUITCSS naming conventions
This file contains 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
// ----------------------------------------------------------------------------------------------------------------- | |
// Mixins to use the SUITCSS methodology. | |
// This Sass version allow to use the nested classes and selectors. Solved the problem from PostCss Bem Plugin | |
// | |
// See more about: | |
// https://suitcss.github.io/ | |
// | |
// The mixins generate classes in SUITCSS naming conventions based on PostCss Bem Plugin, see more about: | |
// https://github.com/ileri/postcss-bem | |
// ----------------------------------------------------------------------------------------------------------------- | |
@mixin utility($name) { | |
.u-#{$name} { | |
@content; | |
} | |
} | |
@mixin modifier($name) { | |
&--#{$name} { | |
@content; | |
} | |
} | |
@mixin descendent($name) { | |
&-#{$name} { | |
@content; | |
} | |
} | |
@mixin when($name) { | |
&.is-#{$name} { | |
@content; | |
} | |
} | |
@mixin component($name) { | |
@if & { | |
&-#{$name} { | |
@content; | |
} | |
} @else { | |
.#{$name} { | |
@content; | |
} | |
} | |
} | |
@mixin component-namespace($name) { | |
.#{$name} { | |
@content; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment