Last active
July 9, 2016 12:17
-
-
Save KaelWD/571f013543b407e9671907ff8f959d12 to your computer and use it in GitHub Desktop.
AMCSS selector mixin for SCSS
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
// ==================================================================== | |
// | |
// AMCSS SCSS Mixin | |
// -------------------------------------------------------------------- | |
// Kael Watts-Deuchar @KaelWD | |
// | |
// Heavily based on a mixin by @indrekpaas but improved with the | |
// addition of multiple selectors in one declaration. | |
// | |
// Original: https://gist.github.com/indrekpaas/49f466270618d4b8ee7e | |
// ==================================================================== | |
@mixin am($args...) { | |
$prefix : "am-"; | |
$selectors : (); | |
@each $group in $args { | |
@if length($group) == 1 { | |
$selector : "[#{$prefix}#{$group}]"; | |
$selectors : append($selectors, $selector, "comma"); | |
} @else { | |
$namespace : nth($group, 1); | |
$val : (); | |
@for $i from 2 through length($group) { | |
$val : append($val, nth($group, $i)); | |
} | |
$selector : "[#{$prefix}#{$namespace}~=\"#{$val}\"]"; | |
$selectors : append($selectors, $selector, "comma"); | |
} | |
} | |
#{$selectors} { | |
@content; | |
} | |
} |
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
@include am(Block) { | |
content : 'Selecting a block'; | |
} | |
@include am(Block-Child) { | |
content : 'Selecting a child element'; | |
} | |
@include am(Block-Child variant) { | |
content : 'Selecting a variant'; | |
} | |
@include am(First, Second-Child, Third variant, Fourth variant another-variant) { | |
content : 'Selecting several blocks and variants at once'; | |
} |
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
[am-Block] { | |
content: 'Selecting a block'; | |
} | |
[am-Block-Child] { | |
content: 'Selecting a child element'; | |
} | |
[am-Block-Child~="variant"] { | |
content: 'Selecting a variant'; | |
} | |
[am-First], [am-Second-Child], [am-Third~="variant"], [am-Fourth~="variant another-variant"] { | |
content: 'Selecting several blocks and variants at once'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment