在使用@media时，有没有一种方法可以避免重复样式

Question

我不确定这个问题问得对不对，但想不出更好的措辞。我正在玩一个新的响应引导布局，一个固定的可折叠侧菜单。你知道，因为这是新的黑色。

无论如何，我在css中设置了一个@media (max-width: 767px) {...}，并在调整屏幕大小时添加了一些东西来调整工作空间。这很管用。然后我决定添加一个按钮来手动切换，即使屏幕超过767px，因为。。。选择

但我发现自己不得不重复我在@media区块中输入的所有风格。这对我来说似乎很愚蠢，因为如果我调整一些数字，我就必须在几个地方进行调整。但我似乎想不出如何组织它不重复。

我是不是错过了什么？还是这是我需要放松并开始使用更少或类似的东西的地方？

这是一把小提琴：http://jsfiddle.net/yn5n9/(注意：要使fiddle工作，"结果"窗格需要大于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不是一个选项。