Bootstrap 3 zmiana liczby kolumn siatki i szerokości rynny na konkretnych pojemnikach za pomocą SASS mixin

Question

Próbuję zmienić liczbę kolumn siatki i szerokości rynny w obrębie określonych kontenerów.

Oczywistym i najszybszym sposobem byłoby użycie mixin w Bootstrap SASS.

Czy nie ma jednego mixina, który obsługuje to wszystko w jednym? Zmagam się, aby zobaczyć, jak każdy uruchamia wszystkie miksy w _grid.scss

Na przykład szukam czegoś takiego.

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

-

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

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

Jeśli nie, każdy ma jakieś pomysły?

---

UPDATE

Po odrobinie wytrwałości, pracowałem go i sprawiła, że ​​moja własna ...

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

} 

Wystarczy uruchomić tak ...

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

Answer 1

Oto moje rozwiązanie:

Pierwszy zestaw nowych vars (to tylko dla overal konfiguracji kolumny, a nie dla poszczególnych zmian) w vars.scss

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

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

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

Oto wstawek, które trzymam w 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; 

} 

Upewnij się, że kolejność importu SCSS jest tak ..

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

Mixin przykład stosowanie jest jak tak ...

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

Nadzieja to pomaga. Możesz poprawić :-)