Переключить мобильное представление в Foundation, используя класс CSS или JS

Question

Я пытаюсь переключить мобильное представление для основы фонда.

Я нашел соответствующий раздел CSS в foundation.css файл...

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

И я скопировал содержимое, добавив к каждому селектору префикс (в том числе после запятой - как не в начале строки) с новым классом (я назвал 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%; }

Теперь я могу переключать мобильный вид, добавляя или удаляя slim класс к html тег. Это именно то, что я хочу сделать - и мне нравится, что он работает с css (установить сторону сервера) или javascript (так что может быть переключен на стороне клиента любым триггером).

Однако я ненавижу, что мне пришлось все дублировать. Есть ли способ сделать эту работу без дублирования?

Можно ли изменить @media селекторы с JavaScript, например, или сделать @media контейнер или .slim контейнер применить содержащиеся стили?

Есть ли способ лучше?

Answer 1

Глядя на scss, предоставляемый с Foundation, вы можете использовать mixin для grid-column как часть вашего скомпилированного css.

Ниже приведен фрагмент из _grid.scss, однако вместо включения @include в медиа-запросе вы просто оберните его .slim учебный класс.

// 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) 

Ссылка на Grid.scss на github