Question

我正在使用Bourbon和SASS-flavor 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（使用一些样本），以及然后在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 )。 theme.scss中的代码在调用$gradient-blue（或扩展程序%gradient-blue）时没有问题。

我原本希望$gradient-blue编译一次并完成。这怎么没发生？

Answer 1

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

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

因为它是混合物。查看文档：{{3}}

SASS编译顺序：分配给某些代码中未编译的变量的函数输出

1 个答案: