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

【问题标题】：Is there a way to NOT repeat styles when using @media?有没有办法在使用@media 时不重复样式？
【发布时间】：2014-02-16 06:05:21
【问题描述】：

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

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

谢谢。

【问题讨论】：

一种快速肮脏的方法是在调整屏幕大小时添加类hide-it（通过跟踪 Javascript 中的调整大小事件），从而摆脱媒体查询。但我希望看到比这个更好的答案:-)
这整件事读起来像是在恳求不要使用那个让你使用变量的东西，即使你真的很想使用变量。

【解决方案1】：

目前的 CSS3 规范无法做到这一点，尽管即将推出的 CSS 变量可能会在不久的将来实现这一目标。你被 LESS/SASS/etc 卡住了。

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

【讨论】：

这是我所期待的。我更多地将这种布局用作学习工具，因为我是“响应式”和@media 的新手，并且正在尝试将其完全拼凑起来。我不反对 javascript 方式或 LESS 做事方式，但它看起来非常接近，但我并不希望我错过了什么。