Skip to content

Instantly share code, notes, and snippets.

@matori
Last active August 29, 2015 14:19
Show Gist options
  • Save matori/ef253d8e530455076d82 to your computer and use it in GitHub Desktop.
Save matori/ef253d8e530455076d82 to your computer and use it in GitHub Desktop.
@charset "UTF-8";
$state-chain-mixin-pseudo-syntax-legacy: false !default;
@mixin state-chain($state-change-target, $state) {
$selector: selector-append($state-change-target, ".st-#{$state}");
$self: false;
$state-chain-before-pseudo: "::before";
$state-chain-after-pseudo: "::after";
@if $state-chain-mixin-pseudo-syntax-legacy {
$state-chain-before-pseudo: str-slice($state-chain-before-pseudo, 2);
$state-chain-after-pseudo: str-slice($state-chain-after-pseudo, 2);
}
$state-chain-before-pseudo-length: str-length($state-chain-before-pseudo);
$state-chain-after-pseudo-length: str-length($state-chain-after-pseudo);
@if $state-change-target == & {
$self: true;
}
@if str-slice(#{&}, -$state-chain-before-pseudo-length) == $state-chain-before-pseudo {
@if selector-append($state-change-target, $state-chain-before-pseudo) == & {
$self: true;
$selector: selector-append($selector, $state-chain-before-pseudo);
}
}
@if str-slice(#{&}, -$state-chain-after-pseudo-length) == $state-chain-after-pseudo {
@if selector-append($state-change-target, $state-chain-after-pseudo) == & {
$self: true;
$selector: selector-append($selector, $state-chain-after-pseudo);
}
}
@if not $self {
$selector: selector-nest($selector, &);
}
@at-root {
#{$selector} {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment