Twitter bootstrap 将渐变与scss颜色贴图一起使用-可能吗?
我正在使用Bootstrap 4,在为我的应用程序设置主题时,我想知道是否可以在Twitter bootstrap 将渐变与scss颜色贴图一起使用-可能吗?,twitter-bootstrap,sass,bootstrap-4,Twitter Bootstrap,Sass,Bootstrap 4,我正在使用Bootstrap 4,在为我的应用程序设置主题时,我想知道是否可以在$theme colors地图中使用渐变 用法示例 $theme-colors: ( "brand-gradient": background: -moz-linear-gradient(-45deg, #fff 0%, #000 100%); ); 所以如果我想要一个按钮是渐变的,我可以 测试 然后,除了添加渐变外,还可以像通常一样为旧浏览器使用回退 只是一个好奇的问题。不幸的是,你不能。至少不是这样
$theme colors
地图中使用渐变
用法示例
$theme-colors: (
"brand-gradient": background: -moz-linear-gradient(-45deg, #fff 0%, #000 100%);
);
所以如果我想要一个按钮是渐变的,我可以
测试
然后,除了添加渐变外,还可以像通常一样为旧浏览器使用回退
只是一个好奇的问题。不幸的是,你不能。至少不是这样
$theme colors
中的btn
类如下:
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
如果您将类添加到$theme colors
,则通常可以按照您的建议使用类btn品牌渐变
如果您button-variant()
您将看到它使用另一个名为gradient-bg()
的mixin作为按钮背景和边框
在中,背景设置如下:
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
CSS线性渐变
中的$color
参数必须是有效的,而线性渐变在这种情况下是无效的。因此,要使其起作用,我必须使用纯色,然后我所有的按钮等也都是渐变色?至少我是这样理解混合的。我的问题是,有没有一种方法可以只在特定类“btn gradient primary”指定的按钮上使用渐变?