Sass / Compass-将变量传递给嵌套的背景图像混合

Question

I'm trying to pass a variable (a color hex-code) to the Compass background-image mixin that I've nested inside a mixin I've declared.

When Compass tries to compile the CSS it throws the following error.

error sass/styles.scss (Line 103 of sass/_mixins.scss: Expected a color. Got: #fef1d0)

When I replace the variable with a hardcoded hex value ie #FEF1D0 in the background-image mixin the CSS is compiled without errors.

Below is the code.

// The variables
  // primary
  $yellow:           #FCB813;
  $blue:             #005696;

  // secondary
  $yellow-soft:       #FEF1D0;
  $blue-soft:         #D9E6EF;

// The mixin
  @mixin main-menu($primary, $secondary) {
      border-bottom: {
        color: $primary;
      style: solid;
    }
    background: #fff; // older browsers.
    @include background-image(linear-gradient(top, white 50%, $secondary 50%));
    background-size: 100% 200%;
    background-position: top;
    margin-left:10px;
    @include transition(all 0.5s ease);
    &:hover {
      background-position: bottom;
    }
  }

//Using the mixin
  #main-menu {
    $sections: (
      yellow $yellow $yellow-soft,
      blue $blue $blue-soft
      );
    @each $color in $sections {
      a.#{nth($color, 1)} {
        @include main-menu(#{nth($color, 2)}, #{nth($color, 3)});
      }
    }

The compiled CSS when $secondary is replaced with #FEF1D0 in the background-image mixin. ie @include background-image(linear-gradient(top, white 50%, #FEF1D0 50%));

#main-menu a.yellow {
  border-bottom-color: #fcb813;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  background: #fff;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #ffffff), color-stop(50%, #fef1d0));
  background-image: -webkit-linear-gradient(top, #ffffff 50%, #fef1d0 50%);
  background-image: -moz-linear-gradient(top, #ffffff 50%, #fef1d0 50%);
  background-image: -o-linear-gradient(top, #ffffff 50%, #fef1d0 50%);
  background-image: linear-gradient(top, #ffffff 50%, #fef1d0 50%);
  background-size: 100% 200%;
  background-position: top;
  margin-left: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

The goal is to have a background transition on hover state that fills the link background with a sliding transition of the bg-color from bottom to top, thanks to this great suggestion . Which works very nicely except for the way compass is parsing the variable.

Answer 1

The problem is in the @include parameters. You are using Sass interpolation for both arguments, it causes the mixin treat these variables as strings instead of, in this case, colors:

type_of(#FEF1D0); // returns color
type_of(#{#FEF1D0}); // returns string

You can pass a string to color property but linear-gradient is a function and it requires a color.

To solve this problem you should remove the interpolation of the second argument to pass it as a color. You can use the interpolation for the first argument but is unnecesary so I recommend you remove it.

So you should use:

@include main-menu(nth($color, 2), nth($color, 3));

instead of:

@include main-menu(#{nth($color, 2)}, #{nth($color, 3)})