Created
October 22, 2014 14:56
-
-
Save starryeyez024/0da213a93c3c0a114257 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <div class="test">test</div> | |
| <div class="test1">test 1</div> | |
| <div class="test2">test 2</div> | |
| <div class="test3">test 3</div> | |
| <div class="test4">test 4</div> | |
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
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // THE SELF-AWARE MIXIN | |
| // define global map to store info about this mixin | |
| $my-mixin-info: (); | |
| // define mixin with any format of arguments | |
| @mixin my-mixin($pos1, $pos2, $map: (), $rest...) { | |
| // capture some or all of the arguments, | |
| // according to whatever repetitions you want to avoid | |
| $my-args: ($pos1, $pos2, $map); | |
| // look up these arguments as a key in the global map | |
| $id: map-get($my-mixin-info, $my-args); | |
| // if they return an 'ID'... | |
| @if $id { | |
| // extend that ID | |
| @extend %#{$id}; | |
| // output any specific stuff | |
| specific: inspect($rest); | |
| } | |
| // otherwise... | |
| @else { | |
| // create the ID | |
| $id: unique-id(); | |
| // merge the ID in to the mixin's map against the ARGS | |
| $my-mixin-info: map-merge($my-mixin-info, ($my-args: $id)) !global; | |
| // create a placeholder named after the ID at root | |
| @at-root { | |
| %#{$id} { | |
| // output the stuff you want to not repeat | |
| common: inspect($my-args); | |
| } | |
| } | |
| // extend that placeholder | |
| @extend %#{$id}; | |
| // output any specific stuff | |
| specific: inspect($rest); | |
| } | |
| } | |
| .test { | |
| @include my-mixin(1, 2, (), 4, 5); | |
| } | |
| .test2 { | |
| @include my-mixin(1, 2); | |
| } | |
| .test3 { | |
| @include my-mixin(1, 2, (), 6, 7); | |
| } |
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
| .test { | |
| specific: 4, 5; | |
| } | |
| .test, .test2, .test3 { | |
| common: 1, 2, (); | |
| } | |
| .test2 { | |
| specific: (); | |
| } | |
| .test3 { | |
| specific: 6, 7; | |
| } |
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
| <div class="test">test</div> | |
| <div class="test1">test 1</div> | |
| <div class="test2">test 2</div> | |
| <div class="test3">test 3</div> | |
| <div class="test4">test 4</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment