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

Question

我正在尝试将一个变量(颜色十六进制代码)传递给我嵌套在已声明的混入中的 Compass 背景图像混入。

当 Compass 尝试编译 CSS 时，它会抛出以下错误。

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

当我用硬编码的十六进制值替换变量时，即背景图像混合中的 #FEF1D0，CSS 编译没有错误。

下面是代码。

// 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)});
      }
    }

当 $secondary 在背景图像混合中被替换为 #FEF1D0 时编译的 CSS。 即 @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;
}

目标是在悬停状态下有一个背景过渡，用 bg-color 从底部到顶部的滑动过渡填充链接背景，感谢这个伟大的 suggestion .除了 compass 解析变量的方式外，它工作得很好。

Answer 1

问题出在@include 参数中。您正在为两个参数使用 Sass 插值，它会导致 mixin 将这些变量视为字符串，而不是在本例中为颜色:

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

您可以将字符串传递给 color 属性，但 linear-gradient 是一个函数，它需要一个颜色。

要解决此问题，您应该删除第二个参数的插值以将其作为颜色传递。您可以对第一个参数使用插值，但这是不必要的，因此我建议您将其删除。

所以你应该使用:

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

代替:

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