How to to modify grid gutter width in bootstrap sass for different resolutions?

Question

I am using Twitter Bootstrap SASS 3.

I want the grid gutter width to be 20px in tablets (screen-sm), 30px in desktop (screen-md and higher).

I have the variable $grid-gutter-width = 30

Then I wrote

@media (min-width: $screen-sm-min) {
   .row{margin-left:-10px; margin-right:-10px;}
   .col{padding-left:10px; padding-right:10px;}
}
@media (min-width: $screen-sm-min) {
    .row{margin-left:-$grid-gutter-width/2; margin-right:-$grid-gutter-width/2;}
    .col{padding-left:$grid-gutter-width/2; padding-right:$grid-gutter-width/2;}
}

after adding a col class to all my row childs (columns) Does anyone know a smarter way of doing it?