使用@media時有沒有辦法重複樣式？

我不確定我是否問這個問題，但想不出更好的措辭。我正在玩一個新的響應式引導程序佈局，其中一個使用固定的可摺疊側面菜單。你知道，因爲這是新的黑色。使用@media時有沒有辦法重複樣式？

無論如何，我在我的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")

觸發

謝謝。

2014-02-15 huxley

一個快速骯髒的方法是在屏幕大小調整時（通過在Javascript中跟蹤調整大小事件）添加類hide-it，從而擺脫媒體查詢。但我希望看到比這個更好的答案:-) –

這整個事情讀取作爲一個理由不要使用可以讓你使用變量，即使你真的想使用變量的理由的請求。 – cimmanon

沒有辦法做到這一點與當前的CSS3規範，雖然即將到來的CSS變量可能會在不久的將來。你被困在LESS/SASS /等等。

順便說一句，我假設JavaScript不是一個選項。

2014-02-15 22:05:21

這就是我所期待的。我更多地使用這種佈局作爲學習工具，因爲我對「響應式」和@media的新東西很陌生，並且試圖將它完全分開。我並不反對JavaScript的方式或做任何事情的方式，但它似乎很接近，但不是我希望我錯過了一些東西。 – huxley

回答