0

我正在使用波旁威士忌和 SASS 风味的 Bootstrap。这是我的基本 SCSS 文件：

@import '../../bower_components/bourbon/dist/_bourbon.scss';
@import 'app/swatches.scss';
@import '../../bower_components/bootstrap-sass/lib/bootstrap.scss';
@import 'app/theme.scss';

我的想法是我首先引入 Bourbon，因为我打算在所有地方都使用它，调用swatches.scss以设置应用程序范围的变量，调用 Bootstrap（它使用一些样本），然后在顶部自定义我的应用程序引导程序。swatches.scss看起来像这样：

// The brand
$blue          : #0078ae;
$grey-light    : #58595b;
$grey-dark     : #59595e;
$gradient-blue : linear-gradient( #0089ca, #006cb9 );
$gradient-grey : linear-gradient( #e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100% );

// Set Bootstrap's variables (map back to our own vars if need be)
$brand-primary            : $blue;
$btn-default-color        : #fff;
$panel-primary-heading-bg : $gradient-blue;
$panel-default-heading-bg : $gradient-grey;

%gradient-blue {
    @include background-image( $gradient-blue );
}

不知何故，Bootstrap 没有接收到编译后的输出$gradient-blue——它接收的是未编译的字符串linear-gradient( #0089ca, #006cb9 )。代码 in调用（或扩展名）theme.scss没有问题。$gradient-blue%gradient-blue

我本来希望$gradient-blue编译一次就完成了。这怎么没有发生？

4

1 回答 1

0

我认为您应该在语法中使用线性渐变：

$gradient-blue : @include linear-gradient( #0089ca, #006cb9 );
$gradient-grey : @include linear-gradient( #e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100% );

因为它是一个mixin。查看文档：http ://bourbon.io/docs/#linear-gradient

于 2014-05-13T12:52:34.577 回答