Toggle mobile view in Foundation using CSS class o

I am trying to toggle the mobile view for foundation framework.

I found the relevant section of css in the foundation.css file...

@media only screen and (max-width: 767px) {
  body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  .column, .columns { width: auto !important; float: none; }

... more code here ...

  .push-three-mobile { left: 75%; }
  .pull-three-mobile { right: 75%; }
}

And I copied the contents out, prefixing every selector (including the ones after comma - as in not at the start of the line) with a new class (I called slim).

.slim body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.slim .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.slim .column, .slim .columns { width: auto !important; float: none; }

... more code here ...

.slim .push-three-mobile { left: 75%; }
.slim .pull-three-mobile { right: 75%; }

I can now toggle the mobile view by adding or removing the slim class to the html tag. This is exactly what I want to do - and I like that it works with css (set server side) or javascript (so can be toggled client side by any trigger).

However, I hate that I have had to duplicate everything. Is there a way I can make this work without duplication?

Is it possible to alter @media selectors with javascript for example, or to make the @media container or .slim container apply contained styles?

Is there a better way?

Looking at the scss that is provided with Foundation you could use the grid-column mixin as part of your compiled css.

Below is a snippit from the _grid.scss, however instead of including the @include in a media query you would just wrap it with your .slim class.

// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true)

Link to Grid.scss on github