[英]Rails: With Bootstrap-Sass, How Do You Use Mixins?
I could not find good references about how to use mixins from bootstrap-sass. 我找不到关于如何使用bootstrap-sass的mixin的好参考。 I'm trying to add gradient effect to my background color, and I want to learn how to use the built-in gradient function from the mixin. 我正在尝试为我的背景颜色添加渐变效果,我想学习如何使用mixin中的内置渐变功能。
// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
background-color: $endColor;
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex- str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
}
In application.css.scss file, I tried 在application.css.scss文件中,我试过了
body {
padding-right: 50px;
padding-left: 50px;
gradient-vertical($startcolor: $white, $endcolor: #08C);
}
But did not work. 但没有奏效。 I appreciate your help. 我感谢您的帮助。
Try this: 尝试这个:
body {
padding-right: 50px;
padding-left: 50px;
@include gradient-vertical($white, #08c);
}
The mixin arguments are usually optional (unless you omit some or declare them out of order), but there's nothing wrong with using them like you have ( $startcolor: $white
, etc). mixin参数通常是可选的(除非你省略一些或者不按顺序声明它们),但是使用它们没有任何问题( $startcolor: $white
等)。 The only thing you are missing is the @include
. 你唯一缺少的是@include
。 Also make sure you have @import "bootstrap";
还要确保你有@import "bootstrap";
at the top of application.css.scss
. 在application.css.scss
的顶部。
You can refer to SASS Reference for more info. 有关详细信息,请参阅SASS参考 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.