Cacher is the code snippet organizer for pro developers

<div class="icon"></div>

Invalid CSS after "...ckground-image(": expected ")", was "@if $checked {"

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";

$color-white: #fff;
$cascading-preference-color: rgba($color-white, 0.6);

$bg-image: (url('/images/form.checkbox-check.svg'));
$bg-pattern: (
    linear-gradient(
      135deg,
      transparent 20%,
      $cascading-preference-color 20%,
      $cascading-preference-color 40%,
      transparent 40%,
      transparent 70%,
      $cascading-preference-color 70%,
      $cascading-preference-color 90%,
      transparent 90%
    )
);

@mixin cascading-preference($checked:false) {
  @include background-image(
    @if $checked {
      $bg-pattern
    } else {
      append($bg-image, $bg-pattern, comma);
    }
  )
}


.icon {
  @include cascading-preference();
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}

<div class="icon"></div>