Build smarter Sass with introspection

input-HTML.html

<div class="my-selector"></div>

input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// custom list function
@function get-list-value($list, $place: first)
  $list-length: length($list)
  @if $place == first or $place == last
    @if $place == first
      $group: nth($list, 1)
      $first-object: nth($group, 1)
      @return $first-object
    @else if $place == last
      $group: nth($list, length($list))
      $last-object: nth($group, 1)
      @return $last-object
  @else
    @warn "'#{$place}' is not valid option for the 'get-list-value' function, supported options are 'first' or 'last'."
    @return 'no value returned'


// gradient mixin
=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"



// CSS
.my-selector
  height: 100px
  +simple-gradient(bottom, yellow 0%, #53cbf1 40%, #05abe0 100%)