我知道這個問題很舊,但希望這是你正在尋找的(因爲沒有答案)。而且我也不知道向您的CSS添加特定類是否違反了您不要重複CSS的要求。
您可以通過更改您的@media
查詢的定義來實現您想要執行的操作。基本上,並不是說當屏幕變得小於某個值時想要發生某些事情,請保持媒體查詢的小屏幕出現在屏幕上,併爲更大的屏幕設置媒體查詢。
然後,您只需更改您調用CSS的順序,併爲要調用類like-small
的類型添加特異性。
HTML:
<div class="wrapper like-small">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.wrapper.like-small .a,
.wrapper .a {
height:200px;
width:200px;
background:purple;
}
.wrapper.like-small .b,
.wrapper .b {
height:200px;
width:200px;
background:blue;
}
@media all and (min-width: 400px), (min-height: 300px) {
.wrapper .a {
height:100px;
width:100px;
background:yellow;
}
.wrapper .b {
height:100px;
width:100px;
background:red;
}
}
和提琴:http://jsfiddle.net/disinfor/70n37hhj/
希望這是你以後有什麼(在一年半前:)
也許與[*少*](http://lesscss.org)。 – 2013-03-27 09:39:30
@JaredFarrish:即使使用較少的sass或手寫筆,渲染後的css也會被複制。 – Naor 2013-03-27 10:05:20
有趣的問題是,它僅用於調試目的嗎? – zessx 2013-03-27 11:14:50