Skip to content

Instantly share code, notes, and snippets.

@mistergraphx
Last active August 29, 2015 14:21
Show Gist options
  • Save mistergraphx/770943bcc753d330fd15 to your computer and use it in GitHub Desktop.
Save mistergraphx/770943bcc753d330fd15 to your computer and use it in GitHub Desktop.
Modified version of the bourbon linear-gradient mixin ... Generated by SassMeister.com.
// ----
// libsass (v3.2.4)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
@mixin linear-gradient2($pos, $g1, $g2: null,
$g3: null, $g4: null,
$g5: null, $g6: null,
$g7: null, $g8: null,
$g9: null, $g10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
$pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
$gradients: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
// Purge null values from list
$full: ();
@each $item in $gradients {
@if ($item) {
$full: append($full, $item);
}
}
$full: zip($full);
// Set $g1 as the default fallback color
$fallback-color: nth($g1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}
$medium-purple: purple;
$dark-purple: darken(purple, 20%);
.selector{
@include linear-gradient2(to top, $medium-purple, $dark-purple);
}
@function color($val) {
@if type-of($val) == color {
@return $val;
} @else {
@return null
}
}
.block {
color: color(#FFF);
}
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
.selector {
background-color: purple;
background-image: -webkit-linear-gradient(bottom, purple, #1a001a);
background-image: linear-gradient(to top,purple, #1a001a);
}
.block {
color: #FFF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment