Skip to content

Instantly share code, notes, and snippets.

@KaelWD
Last active July 9, 2016 12:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KaelWD/571f013543b407e9671907ff8f959d12 to your computer and use it in GitHub Desktop.
Save KaelWD/571f013543b407e9671907ff8f959d12 to your computer and use it in GitHub Desktop.
AMCSS selector mixin for SCSS
// ====================================================================
//
// 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;
}
}
@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';
}
[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