Skip to content

Instantly share code, notes, and snippets.

@kianoshp
Last active August 29, 2015 14:16
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 kianoshp/740aa699dac03ef9b775 to your computer and use it in GitHub Desktop.
Save kianoshp/740aa699dac03ef9b775 to your computer and use it in GitHub Desktop.
Example of a simple Sass mixin to create a background gradient with progressive error handling and introspection
@function get-list-value($list, $place: first)
$list-length: length($list)
$group: null
@if $place == first
$group: nth($list, 1)
@else if $place == last
$group: nth($list, length($list))
$listValue-object: nth($group, 1)
@return $listValue-object
my-selector
+simple-gradient(bottom, #fffadc 0%, #53cbf1 40%, #05abe0 100%)
=simple-gradient($direction, $colors...)
$startColorstr: get-list-value($colors)
$endColorstr: get-list-value($colors, last)
background-color: $startColorstr
background-image: linear-gradient(to $direction, $colors)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{ie-hex-str($startColorstr)}', endColorstr = '#{ie-hex-str($endColorstr)}', GradientType = 0)
=simple-gradient($direction, $colors...)
@if function-exists(get-list-value)
$startColorstr: get-list-value($colors)
$endColorstr: get-list-value($colors, last)
background-color: $startColorstr
background-image: linear-gradient(to $direction, $colors)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{ie-hex-str($startColorstr)}', endColorstr = '#{ie-hex-str($endColorstr)}', GradientType = 0)
@else
@warn "The `simple-gradient' mixin requires the custom function 'get-list-value', please install"
=simple-gradient($direction, $colors...)
@if function-exists(get-list-value)
$startColorstr: get-list-value($colors)
$endColorstr: get-list-value($colors, last)
@if type-of($startColorstr) == color
@if type-of($endColorstr) == color
background-color: $startColorstr
background-image: linear-gradient(to $direction, $colors)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{ie-hex-str($startColorstr)}', endColorstr = '#{ie-hex-str($endColorstr)}', GradientType = 0)
@else
@warn "'#{$endColorstr}' is an invalid color, ignoring use in the '#{&}' selector"
@else
@warn "'#{$startColorstr}' is an invalid color, ignoring use in the '#{&}' selector"
@else
@warn "The `simple-gradient' mixin requires the custom function 'get-list-value', please install"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment