Bootstrap 3 modifica il conteggio delle colonne della griglia e la larghezza della grondaia su contenitori specifici utilizzando il mixin SASS

Question

Sto cercando di modificare il conteggio della griglia e la larghezza della grondaia all'interno di contenitori specifici.

Il modo più ovvio e più veloce sarebbe utilizzare un mixin in Bootstrap SASS.

Non c'è un mixin che gestisce tutto questo in uno? Faccio fatica a vedere uno esegue tutti i mixin in _grid.scss

Ad esempio, sto cercando qualcosa di simile.

@mixin new-grid-system($grid-columns, $grid-gutter-width); 

-

.gallery { 
    @include new-grid-system('10', '10px'); 
} 

.gforms { 
    @include new-grid-system('9', '10px'); 
} 

In caso contrario, qualcuno ha qualche idea?

---

UPDATE

Dopo un po 'di persistenza, ho lavorato fuori e ha reso il mio ...

@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); 
    } 

} 

basta eseguire come questo ...

.gallery { 
    @include new-grid-system('10', '10px'); 
} 

Answer 1

Ecco la mia soluzione:

Prima stabilito nuovi Vars (questo è solo per l'installazione della colonna overal, non per le specifiche modifiche) in vars.scss

/************************************ 
***** column vars 
*************************************/ 

$new-columns :     12; 
$new-gutter-width :    40px; 

$grid-columns :     $new-columns; 
$grid-gutter-width :   $new-gutter-width; 

Ecco la mixin che tengo in mixins.scss

@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; 

} 

assicurarsi che l'ordine del importazione SCSS è come questo ..

@import 'vars'; 
@import 'mixins'; 

utilizzo esempio Mixin è in questo modo ...

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

Spero che questo aiuti. Sentiti libero di migliorare :-)