Bootstrap 3 使用 SASS mixin 更改特定容器上的网格列数和装订线宽度答案

【问题标题】：Bootstrap 3 change grid column count and gutter width on specific containers using SASS mixinBootstrap 3 使用 SASS mixin 更改特定容器上的网格列数和装订线宽度
【发布时间】：2014-09-14 11:37:06
【问题描述】：

我正在尝试更改特定容器中的网格列数和装订线宽度。

显而易见且最快的方法是在 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');
}

【问题讨论】：

谢谢，您能否发布您的解决方案作为答案？

标签： grid twitter-bootstrap-3 sass mixins

【解决方案1】：

这是我的解决方案：

首先在 vars.scss

中设置新的 vars（这仅用于整体列设置，不适用于特定更改）

/************************************
***** 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 );
    }
}

希望这会有所帮助。随意改进:-)

【讨论】：