0

I would somehow like to have different grid gutter widths using the Bootstrap SASS variable $grid-gutter-width, but assigning it different values within media queries does not work. I know this is not possible, but any help using mixins or loops is appreciated.

Example of what does not work, but points out what I want to achieve:

$grid-gutter-width: 30px !default;

@media ($screen-sm-min) {
    $grid-gutter-width: 50px;
}
@media ($screen-md-min) {
    $grid-gutter-width: 70px;
}

Does anyone know how to achieve this in a smart way?

AdmireNL
  • 396
  • 1
  • 9
  • I think it's not exactly a duplicate, since I'm looking for a more specific solution... however facing the same problem with variables. – AdmireNL Aug 20 '14 at 20:39

1 Answers1

1

You don't have access to media queries until after the Sass is processed into CSS, and variables are only relevant before the processing.

You'll need to find where $grid-gutter-width is used (possibly in the make-grid-columns mixin in the grid-framework file) and have that generate different gutter widths for different screen widths.

You'll probably need to add a nested loop so that each column specification (xs, sm, md, etc.) is covered for each screen width.

Gregory Avery-Weir
  • 531
  • 1
  • 4
  • 16
  • Thank you for your reply. I understand that media queries cannot be used for changing variables. However you pointed out where it might be done, I'm not sure how it should be done exactly, since I'm not that pro with SASS mixins and loops. Any help is much appreciated. – AdmireNL Aug 20 '14 at 20:25
  • I'm afraid I'm also not much of an expert and it would depend a lot on how you're architecting your (S)CSS. I'd study up on the syntax, figure out what it's doing by default, and then figure out how to override it. – Gregory Avery-Weir Aug 21 '14 at 02:26