当我用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';
但同样的错误发生。
答案 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';
现在你们两个都在一起玩。我不能让它以其他方式工作,在波旁威士忌之前进口罗盘。我想这个冲突应该在图书馆一级修复(波本威士忌?)。