Question

我正在尝试将一个变量（颜色十六进制代码）传递给Compass背景图像mixin，我已将其嵌套在我声明的mixin中。

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

在background-image mixin中将$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颜色从底部到顶部的滑动过渡来填充链接背景，这要归功于这个伟大的suggestion。除了罗盘解析变量的方式之外，它的工作非常好。

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

Sass / Compass - 将变量传递给嵌套的background-image mixin

1 个答案: