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

Question

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

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

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

我错过了什么吗？或者这是我需要放松并开始使用 LESS 或类似工具的地方吗？

这是一个 fiddle :http://jsfiddle.net/yn5n9/ (注意:要让 fiddle 正常工作，“结果” Pane 需要大于 767 像素)。

注意在@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/etc 困住了。

顺便说一句，我假设 JavaScript 不是一个选项。