Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KittyGiraudel/9481816 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/9481816 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
// Sass polyfill for :matches()
// https://developer.mozilla.org/en-US/docs/Web/CSS/:any
// ---
// @param [string] $string: selector as a string, must contain %m where there would be :matches()
// @param [list] $selectors: list of selectors that would be passed to :matches() function
// ---
// @return [list] $result: equivalent to :matches() as a list
// ---
// @note: multiple :matches() are currently unavailable
@function matches($string, $selectors) {
$index: str-index($string, "%m");
@if not $index {
@warn "No `%m` found in `#{$string}`.";
@return false;
}
$result: ();
@each $selector in $selectors {
$fragment: if($index > 2, str-slice($string, 1, $index - 1), "") + $selector + str-slice($string, $index + 2);
$result: append($result, #{$fragment}, comma);
}
@return $result;
}
// `.main :matches(section, article, aside, nav)`
#{matches(".main %m", section article aside nav)} {
color: red;
}
// `:matches(section, article, aside, nav) h1`
#{matches("%m h1", section article aside nav)} {
color: red;
}
// `.main :matches(section, article, aside, nav) h1`
#{matches(".main %m h1", section article aside nav)} {
color: red;
}
.main section, .main article, .main aside, .main nav {
color: red;
}
section h1, article h1, aside h1, nav h1 {
color: red;
}
.main section h1, .main article h1, .main aside h1, .main nav h1 {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment