波旁线中的线性渐变不是“str-slice”的字符串

时间:2014-08-13 19:27:13

标签: css3 sass compass-sass bourbon neat

当我用Bourbon创建主题时,我收到以下错误:

error sass/screen.scss (Line 18 of sass/bourbon/css3/_background.scss: \
$string: linear-gradient(10deg, #217142,#214271) is not a string for `str-slice')

以下是_background.scss中的代码,因为它位于Github repo上:

@mixin background($backgrounds...) {
    $webkit-backgrounds: ();
    $spec-backgrounds: ();

    @each $background in $backgrounds {
        $webkit-background: ();
        $spec-background: ();
        $background-type: type-of($background);

        @if $background-type == string or list {
            $background-str: if($background-type == list, nth($background, 1), $background);

            # line 18 just below:
            $url-str: str-slice($background-str, 0, 3);  
            $gradient-type: str-slice($background-str, 0, 6);

            @if $url-str == "url" {
                $webkit-background: $background;
                $spec-background: $background;
            }
        }
    }
}

我正在使用Sass 3.3.14&指南针1.0.0.rc.1创建主题,以获得波本威士忌的全部好处。

更新:

(哎呀,我忘了告诉Neat或Bitters。我也在使用它们。抱歉。)

我更新了Bitters'guide on Github上描述的文件:

@import 'compass';

@import 'bourbon/bourbon';
@import 'base/grid-settings';
@import 'neat/neat';
@import 'base/base';

@import 'custom/custom';

但同样的错误发生。

1 个答案:

答案 0 :(得分:2)

我有类似的错误

error (Line 18 of bourbon/css3/_background.scss: $string: linear-gradient(#c73b3c,#b8201f) is not a string for `str-slice')

在工作的波本威士忌/整洁/苦味环境中添加@import 'compass';时。删除它修复了问题。在thinkbot的库之后导入会发出一堆警告而不是错误但是工作。

@import 'bourbon/bourbon';
@import 'base/grid-settings';
@import 'neat/neat';
@import 'base/base';

@import 'custom/custom';

@import 'compass';

问题似乎与$ base-line-height变量有关。 In compass $ base-line-height设置为$base-line-height 24px; In bourbon $ base-line-height设置为$base-line-height: 1.5; 在波旁威士忌加载罗盘后,你得到WARNING: $base-line-height must resolve to a pixel unit. 因为波本威士忌把它设定为1.5。

如果您尝试在$base-line-height: 24px;命令之前添加@import 'compass';,则会收到错误消息: (Line 36 of /usr/local/lib/ruby/gems/2.1.0/gems/compass-core-1.0.1/stylesheets/compass/typography/_vertical_rhythm.scss: Incompatible units: 'em' and 'px'.)

因为$base-font-size在库之间也存在冲突。

我找到的解决方案是设置这样的导入:

@import 'bourbon/bourbon';
@import 'base/grid-settings';
@import 'neat/neat';
@import 'base/base';
@import 'custom/custom';

$base-font-size: 16px;
$base-line-height: 24px;
@import 'compass';

现在你们两个都在一起玩。我不能让它以其他方式工作,在波旁威士忌之前进口罗盘。我想这个冲突应该在图书馆一级修复(波本威士忌?)。