我正在尝试更改特定容器中的网格列数和装订线宽度。
显而易见且最快捷的方法是在Bootstrap SASS中使用mixin。
是否有一个mixin可以在一个处理所有这些?我努力想看到一个在_grid.scss中运行所有mixins
例如,我正在寻找类似的东西。
@mixin new-grid-system($grid-columns, $grid-gutter-width);
-
.gallery {
@include new-grid-system('10', '10px');
}
.gforms {
@include new-grid-system('9', '10px');
}
如果没有,任何人都有任何想法?
更新
经过一段时间的坚持,我把它解决了,并自己创造了......
@mixin new-grid-system($new-grid-columns, $new-grid-gutter-width) {
$grid-columns: $new-grid-columns;
$grid-gutter-width: $new-grid-gutter-width;
.row {
@include make-row();
}
@include make-grid-columns();
@include make-grid(xs);
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
}
就这样跑......
.gallery {
@include new-grid-system('10', '10px');
}
答案 0 :(得分:4)
这是我的解决方案:
首先在 vars.scss
中设置新变量(这仅适用于整个列设置,而不是针对特定更改)/************************************
***** column vars
*************************************/
$new-columns : 12;
$new-gutter-width : 40px;
$grid-columns : $new-columns;
$grid-gutter-width : $new-gutter-width;
这是我在 mixins.scss
中的mixin@mixin column-adjust($column,$gutter) {
// set custom variables for our grid structure
$grid-columns: $column !global;
$grid-gutter-width: $gutter !global;
.row {
@include make-row();
}
@include make-grid-columns();
// @include make-grid(xs);
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
// reset global vars;
$grid-columns: $new-columns !global;
$grid-gutter-width: $new-gutter-width !global;
}
确保scss导入的顺序是这样的..
@import 'vars';
@import 'mixins';
Mixin示例使用就是这样......
/************************************
***** grid changes
*************************************/
.grid {
&.grid-10-across {
@include column-adjust(10, $grid-gutter-width );
}
&.grid-24-across {
@include column-adjust(24, $grid-gutter-width );
}
}
.gutter-slim {
&.gutter-slim-10 {
@include column-adjust($new-columns, 10px );
}
&.gutter-slim-6 {
@include column-adjust($new-columns, 6px );
}
}
希望这会有所帮助。随意改进: - )