Skip to content

Instantly share code, notes, and snippets.

@pzi
Last active August 29, 2015 14:21
Show Gist options
  • Save pzi/a52103687f2340368869 to your computer and use it in GitHub Desktop.
Save pzi/a52103687f2340368869 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.something
.selector
.svg
.selector
.backgroundsize
.selector
.svg.backgroundsize
.selector
// ----
// libsass (v3.2.2)
// ----
// Source: http://hugogiraudel.com/2014/01/27/casting-types-in-sass/
@function to-string($value) {
@return inspect($value);
}
// Source: http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin feature-enhancement($feature...) {
@if length($feature) > 1 {
$feature-list: ();
@each $class in $feature {
$selector: str-insert($class, ".", 1);
$feature-list: append($feature-list, $selector);
}
$feature-list: to-string($feature-list);
$feature-list: str-replace($feature-list, " ");
#{$feature-list} & {
@content;
}
}
@else {
#{$feature} & {
@content;
}
}
}
.selector {
&:before {
content: "nope";
display: inline-block;
}
@include feature-enhancement(svg, backgroundsize) {
&:before {
background-color: yellowgreen;
content: "boop";
}
}
}
.selector:before {
content: "nope";
display: inline-block;
}
.svg.backgroundsize .selector:before {
background-color: yellowgreen;
content: "boop";
}
<div class="something">
<div class="selector"></div>
</div>
<div class="svg">
<div class="selector"></div>
</div>
<div class="backgroundsize">
<div class="selector"></div>
</div>
<div class="svg backgroundsize">
<div class="selector"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment