有没有办法在使用@media时不重复样式？

Question

我不确定我是否正确地提出这个问题，但却想不出更好的措辞。我正在玩一个新的响应式bootstrap布局，一个带有固定的可折叠侧面菜单。你知道，因为它是新的黑色。

无论如何，我在我的CSS中设置了一个@media (max-width: 767px) {...}，并在屏幕调整大小时调整了一些东西来调整工作区。这样可行。然后我决定添加一个按钮来手动切换，即使屏幕超过767px，导致...选择。

但我发现自己不得不重复我放在@media块中的所有样式。这对我来说似乎很愚蠢，因为如果我调整一些数字，我将不得不在几个地方进行调整。但我似乎无法想出如何组织它不重复。

我错过了什么吗？或者这是我需要放松并开始使用LESS或其他一些？

这是一个小提琴：http://jsfiddle.net/yn5n9/ （注意：为了让小提琴工作'结果'窗格需要大于767px）。

在@media中注意到：

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

但是为了让切换按钮工作，我有这些（具有相同的定义）：

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

由$('body').toggleClass("hide-it")

触发

感谢。

Answer 1

目前的CSS3规范无法做到这一点，尽管即将推出的CSS变量可能会在不久的将来发挥作用。你被LESS / SASS /等等困住了。

顺便说一句，我认为JavaScript不是一种选择。