Skip to content

Instantly share code, notes, and snippets.

@pdaoust
Created September 19, 2014 20:52
Show Gist options
  • Save pdaoust/d686de2b4f45fd36312f to your computer and use it in GitHub Desktop.
Save pdaoust/d686de2b4f45fd36312f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
@mixin corral($selector) {
$context: &;
$new-context: $context;
$root-context: '';
$selector-is-root-context: false;
@if is-superselector('html', $selector) {
$root-context: $selector;
$selector-is-root-context: true;
}
@if $context {
$new-context: ();
@for $i from 1 through length($context) {
$subcontext: nth($context, $i);
$new-subcontext: ();
@for $j from 1 through length($subcontext) {
$bit: nth($subcontext, $j);
$bit-is-root: is-superselector('html', $bit);
@if $bit-is-root and $selector-is-root-context {
$root-context: selector-unify($bit, $root-context);
} @else {
$new-subcontext: append($new-subcontext, $bit);
}
}
$new-context: append($new-context, $new-subcontext);
}
}
@at-root #{$root-context} #{$new-context} {
@content;
}
}
.my-container {
color: blue;
@include corral('html.touch') {
color: green;
.foo & {
@include corral('html.mobile') {
&.my-thing {
color: red;
}
}
}
}
}
.my-container {
color: blue;
}
html.touch .my-container {
color: green;
}
html.touch.mobile .foo .my-container.my-thing {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment