Skip to content

Instantly share code, notes, and snippets.

@andrewdc

andrewdc/SassMeister-input-HTML.html

Created September 8, 2014 17:30
Show Gist options
  • Save andrewdc/23a9a510ef637a8017bd to your computer and use it in GitHub Desktop.
Save andrewdc/23a9a510ef637a8017bd to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div data-am-module="">
data-am-module=""
</div>
<div data-am-module="blue">
data-am-module="blue"
</div>
<div data-am-module="large">
data-am-module="large"
</div>
<div data-am-module="large blue">
data-am-module="large blue"
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----
@mixin am($module, $trait: null) {
@if $trait != null {
[data-am-#{$module}~="#{$trait}"]{
@content;
}
}
@else {
[data-am-#{$module}]{
@content;
}
}
}
@include am(module) {
color: red;
}
@include am(module, blue) {
color: blue;
}
@include am(module, large) {
font-size: 2em;
}
Raw
SassMeister-output.css
[data-am-module] {
color: red;
}
[data-am-module~="blue"] {
color: blue;
}
[data-am-module~="large"] {
font-size: 2em;
}
Raw
SassMeister-rendered.html
<div data-am-module="">
data-am-module=""
</div>
<div data-am-module="blue">
data-am-module="blue"
</div>
<div data-am-module="large">
data-am-module="large"
</div>
<div data-am-module="large blue">
data-am-module="large blue"
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment