Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
@function linear-gradient($parameters...) {
$return: linear-gradient;
@each $parameter in $parameters {
$return: append($return,$parameter, comma);
}
@return $return;
}
@function reverse-gradient-direction($directions) {
$dirs: '';
@for $i from 1 through length($directions) {
@if $i > 1 {
$dirs: $dirs + ' ';
}
@if nth($directions, $i) == top {
$dirs: $dirs + bottom;
}
@elseif nth($directions, $i) == bottom {
$dirs: $dirs + top;
}
@elseif nth($directions, $i) == left {
$dirs: $dirs + right;
}
@elseif nth($directions, $i) == right {
$dirs: $dirs + left;
}
}
@return unquote($dirs);
}
@mixin background-image($parameters) {
@if nth($parameters,1) == linear-gradient {
$prefixed-return: ();
$standard-return: ();
@if nth(nth($parameters, 2), 1) == to {
$dirs: nth($parameters, 2);
@for $i from 1 through length($dirs) {
$prefixed-return: append($prefixed-return, reverse-gradient-direction(nth($dirs, $i)), comma);
$standard-return: append($standard-return, nth($dirs, $i), comma);
}
}
@else {
$dirs: nth($parameters, 2);
$i: length($dirs);
@while $i > 0 {
$prefixed-return: append($prefixed-return, nth($dirs, $i), comma);
$standard-return: append($standard-return, reverse-gradient-direction(nth($dirs, $i)), comma);
$i: $i - 1;
}
}
$temp-pref: $prefixed-return;
$temp-stand: $standard-return;
@if length($temp-pref) > 1 {
$prefixed-return: '';
$standard-return: '';
@for $i from 1 through length($temp-pref) {
@if $i > 1 {
$prefixed-return: $prefixed-return + ' ';
$standard-return: $standard-return + ' ';
}
$prefixed-return: $prefixed-return + nth($temp-pref, $i);
$standard-return: $standard-return + nth($temp-stand, $i);
}
$prefixed-return: unquote($prefixed-return);
$standard-return: unquote($standard-return);
}
@for $i from 3 through length($parameters) {
$prefixed-return: append($prefixed-return, nth($parameters, $i), comma);
$standard-return: append($standard-return, nth($parameters, $i), comma);
}
background-image: unquote('-webkit-linear-gradient(' + $prefixed-return + ')');
background-image: unquote('-ms-linear-gradient(' + $prefixed-return + ')');
background-image: unquote('linear-gradient(' + $standard-return + ')');
}
}
div {
@include background-image(linear-gradient(to bottom, white, black));
}
div {
background-image: -webkit-linear-gradient( top, white, black);
background-image: -ms-linear-gradient( top, white, black);
background-image: linear-gradient(to bottom, white, black);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.