Есть ли способ НЕ повторять стили при использовании @media?

Я не уверен, правильно ли задал этот вопрос, но не мог придумать более правильную формулировку. Я играю с новой отзывчивой компоновкой начальной загрузки, с фиксированным сворачиваемым боковым меню. Знаешь, потому что это новый черный.

Во всяком случае, я настроил @media (max-width: 767px) {...} в моем css и бросил некоторые вещи, чтобы настроить рабочее пространство вокруг, когда экран изменяется. Это работает. Затем я решил добавить кнопку для ручного переключения, даже если экран был выше 767 пикселей, вызывают... выбор.

Но мне пришлось повторить все стили, которые я разместил в блоке @media. И это кажется мне немым, потому что, если я подберу некоторые цифры, мне нужно будет настроить несколько мест. Но я не могу придумать, как организовать его, чтобы не повторять.

Я что-то упускаю? Или это, когда мне нужно смягчиться и начать использовать LESS или некоторые из них?

Вот скрипка: http://jsfiddle.net/yn5n9/ (примечание: чтобы скрипка работала над областью "результат", она должна быть больше 767 пикселей).

уведомление в @media есть следующее:

aside {...}
.main-container {...}
#sidebar-header {...}

но затем, чтобы заставить кнопку переключателя работать, у меня есть (с теми же определениями):

.hide-it aside {...}
.hide-it .main-container {...}
.hide-it #sidebar-header {...}    

вызванный $('body').toggleClass("hide-it")

Благодарю.