Skip to content

Instantly share code, notes, and snippets.

@pixelwhip
Created September 8, 2014 16:59
Show Gist options
  • Save pixelwhip/92601e5f31bb71913d06 to your computer and use it in GitHub Desktop.
Save pixelwhip/92601e5f31bb71913d06 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----
// Failed attempt to create a shortcut for writing AMCSS selectors.
// Tried several approaches and all end up being more characters than just
// typing out the selector. Also, unwarranted complexity.
//
// You win this time, Vanilla CSS.
@function am($module, $trait: false) {
@if $trait == false {
@return '[am-' + $module + ']';
} @else {
@return '[am-' + $module + '~="' + $trait + '"]';
}
}
#{am('module')} {
color: red;
}
#{am('module', 'blue')} {
color: blue;
}
#{am('module', 'large')} {
font-size: 2em;
}
[am-module] {
color: red;
}
[am-module~="blue"] {
color: blue;
}
[am-module~="large"] {
font-size: 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment