Skip to content

Instantly share code, notes, and snippets.

@idflood
Created August 7, 2015 15:04
Show Gist options
  • Save idflood/6e88a6898507ce826a7b to your computer and use it in GitHub Desktop.
Save idflood/6e88a6898507ce826a7b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<div class="col1"></div>
</div>
// ----
// libsass (v3.2.5)
// ----
@mixin state($states, $parent: false) {
@if ($current_block != false) {
$selectors: null;
@for $i from 1 through length($states) {
$state: nth($states, $i);
@if ($parent == true) {
$selector: unquote("#{$current_block}#{$state} &");
}
@else {
$selector: unquote("&#{$state}");
}
$glue: ',
';
$selectors: $selectors#{$selector} #{$glue};
}
#{$selectors} {
@content;
}
}
@else {
@warn "state mixin called outside of a block";
}
}
@mixin element($element) {
$current_block: #{&} !global;
&__#{$element} {
@content;
}
// Step out of the current module.
$current_block: false !global;
}
.story-box {
@include element(header) {
font-weight: 500;
@include state(':focus' ':hover' '--active', true) {
text-decoration: underline;
}
@include state(':focus' '--test') {
content: "Second argument to enable state on the block element, otherwise on element by default.";
}
}
}
.story-box__header {
font-weight: 500;
}
.story-box:focus .story-box__header,
.story-box:hover .story-box__header,
.story-box--active .story-box__header {
text-decoration: underline;
}
.story-box__header:focus,
.story-box__header--test {
content: "Second argument to enable state on the block element, otherwise on element by default.";
}
<div class="container">
<div class="col1"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment