Generated by SassMeister.com.
<div class="EditorialPromo media"> | |
<header class="EditorialPromo media-headline"> | |
Editorial Promo | |
</header> | |
</div> |
// ---- | |
// libsass (v3.3.2) | |
// ---- | |
@mixin block($block) { | |
@at-root .#{$block} { | |
@content; | |
} | |
} | |
%module { | |
margin: 5px; | |
padding: 2px; | |
} | |
// Block alias | |
@mixin module($args...) { | |
@include block($args...) { | |
@extend %module; | |
@content; | |
}; | |
} | |
@mixin element($element) { | |
@at-root #{&}-#{$element} { | |
@content; | |
} | |
} | |
%normal-headline { | |
font-size: 32px; | |
} | |
@mixin headline($type) { | |
@include element('#{$type}-headline') { | |
@extend #{$type}-headline; | |
@content; | |
} | |
} | |
@mixin modifier($modifier) { | |
@extend &; | |
@at-root #{&}--#{$modifier} { | |
@content; | |
} | |
} | |
// Definition | |
/* | |
@include module('EditorialPromo') { | |
test: $this; | |
@include headline() { | |
type: $editorialPromo-headline; | |
} | |
} | |
*/ | |
.EditorialPromo { | |
//@extend %module; | |
test: this; | |
&-headline { | |
//@extend %normal-headline; | |
type: headline; | |
} | |
} |
/* | |
@include module('EditorialPromo') { | |
test: $this; | |
@include headline() { | |
type: $editorialPromo-headline; | |
} | |
} | |
*/ | |
.EditorialPromo { | |
test: this; | |
} | |
.EditorialPromo-headline { | |
type: headline; | |
} |
<div class="EditorialPromo media"> | |
<header class="EditorialPromo media-headline"> | |
Editorial Promo | |
</header> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment