Grid Bootstrap 3使用SASS mixin更改特定容器上的网格列计数和间距宽度
我正在尝试更改特定容器中的网格列计数和边沟宽度 最明显和最快的方法是在引导SASS中使用mixin 难道没有一个mixin可以同时处理所有这些吗?我很难看到一个运行所有mixin的_grid.scss 例如,我正在寻找这样的东西Grid Bootstrap 3使用SASS mixin更改特定容器上的网格列计数和间距宽度,grid,twitter-bootstrap-3,sass,mixins,Grid,Twitter Bootstrap 3,Sass,Mixins,我正在尝试更改特定容器中的网格列计数和边沟宽度 最明显和最快的方法是在引导SASS中使用mixin 难道没有一个mixin可以同时处理所有这些吗?我很难看到一个运行所有mixin的_grid.scss 例如,我正在寻找这样的东西 @mixin new-grid-system($grid-columns, $grid-gutter-width); - 如果没有,有人有什么想法吗 更新 经过一点坚持,我解决了这个问题,做出了自己的 @mixin new-grid-system($new-grid
@mixin new-grid-system($grid-columns, $grid-gutter-width);
-
如果没有,有人有什么想法吗
更新 经过一点坚持,我解决了这个问题,做出了自己的
@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');
}
以下是我的解决方案:
首先在vars.scss中设置新变量(这仅用于整体列设置,不用于特定更改)
/************************************
***** column vars
*************************************/
$new-columns : 12;
$new-gutter-width : 40px;
$grid-columns : $new-columns;
$grid-gutter-width : $new-gutter-width;
@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;
}
这是我保存在mixins.scss中的mixin
/************************************
***** column vars
*************************************/
$new-columns : 12;
$new-gutter-width : 40px;
$grid-columns : $new-columns;
$grid-gutter-width : $new-gutter-width;
@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 );
}
}
希望这有帮助。请随时改进:-)谢谢,您能将您的解决方案作为答案发布吗?