少：延長（）與媒體查詢

我想擴展的簡單類少：延長（）與媒體查詢

.positionAbsolute { 
    position: absolute; 
}

我在這裏的問題是，我可以擴展它想：

#something:extend(.positionAbsolute) { 
    something else 
}

媒體查詢中

但是從本身，如果我從外面嘗試，沒有任何規則可以擴展。

這是正常的行爲？爲什麼這樣做？在這種情況下，我將不得不創建一個像四個相同班級中每個媒體查詢擴展的情況下，有沒有一些解決方法嗎？

謝謝

來源

2014-01-29 Santiago Rebella

我不知道我的理解對不對（它總是很難猜測的W/O看到你需要達到一個確切的CSS輸出），但它看起來像你需要的東西，如：

.positionAbsolute { 
    position: absolute; 
} 

#something:extend(.positionAbsolute) { 
    @media only screen and (min-width: 1024px) { 
     something: else; 
    } 
}

其他的方式是：

.positionAbsolute { 
    position: absolute; 
} 

#class-1, 
#class-2 { 
    &:extend(.positionAbsolute); 
} 

@media only screen and (min-width: 1024px) { 
    #class-1 { 
     something: else; 
    } 

    #class-2 { 
     something-even: more else; 
    } 
}

這樣，你將不得不重複選擇，而不是媒體查詢。

來源

2014-01-29 15:57:26

TKS，可能是一個解決方案，但會讓我重複媒體查詢每個元素。 –

>重複每個元素的媒體查詢。是的。還有另外一種方法（你可以重複元素而不是媒體查詢） - 我會更新我的答案。 –

偉大的回答，TKS –

我試圖做到這一點，是很失望，我不能把媒體查詢中的延伸。幸運的是，我能夠使用一個mixin來滿足我想要的。這可能適用於某些情況。我無法真正瞭解你實際上在做什麼。

.centerVertically() 
{ 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; 
    border: 2px solid red; 

    .content 
    { 
     display: inline-block; 
     vertical-align: middle; 
    } 
}

在媒體查詢

@media screen and (min-width: @break_tablet) 
{ 
    /* doesn't work 
     &:before:extend(.centerVertically_wrapper){} 
     .content:extend(.centerVertically_child){} 
    */ 

    .centerVertically();

來源

2014-04-12 06:28:01

只是試着去想像，當你與媒體規則內的另一個類擴展頂層類，爲什麼[媒體規則內部延伸只能在同一媒體規則中的目標類]，可以很明顯的導致CSS是什麼樣子（http://lesscss.org/features/#extend-feature-scoping-extend-inside-media）。 –

這就是爲什麼我們不能有好東西 –

「好東西」？好吧，我會說，我們可以：注意，如果您的媒體塊內部類具有幾乎相同的性能爲頂級類有你不需要複製*該媒體類定義中的所有*這些屬性。相反，您仍然通過頂層的「擴展」重新使用共享屬性，並且在同一類的媒體定義內，您只設置唯一屬性。（不計算類似的媒體安靜聲明本身也可以被抽象爲混音（或者甚至在同一個混音中與「擴展」合併），在這裏有幾個例子。 –

最好用我來到了我變成a GIST here。基本上，我創建了一個外化參考混入用於查詢和進口的所有可能的上下文進去。當你引用一個類來擴展它時，LESS會查看整個查詢，但它會導出它。

參考：

.narrow { 
@media screen and (max-aspect-ratio: 1/1) { 
    @import "position"; 
    @import "z"; 
} 
}

出口：

@import (reference) "narrow"; 

.style-1:extend(.position .abs, .narrow .position .rel) { 
} 
.style-2:extend(.narrow .position .rel) { 
} 
.style-3:extend(.narrow .z .index-1) { 
}

來源

2015-05-12 05:52:00 tappily

少：延長（）與媒體查詢

回答

相關問題