Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="EditorialPromo">
<header class="EditorialPromo-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">
<header class="EditorialPromo-headline">
Editorial Promo
</header>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.