LESS：你可以用媒體查詢分組一個CSS選擇器嗎？

我真的很高興找到你可以創建一個媒體查詢變量，你可以很容易地重用，並使你的代碼更具可讀性。LESS：你可以用媒體查詢分組一個CSS選擇器嗎？

@tablet: ~"(min-width: 768px) and (max-width: 980px)"; 
@media @tablet { ... }

我想知道是否可以用選擇器對媒體查詢進行分組。它似乎沒有按照我實施它的方式工作，但我想我會問是否可能。

@tablet: ~"(min-width: 768px) and (max-width: 980px)"; 
body { 
    aside { ... } 

    &.homepage, 
    @media @tablet { 
    aside { ... } 
    } 
}

我理解媒體查詢從運行的設施，工廠選擇不同的，因爲你必須定義媒體查詢裏面你選擇，但有一些巫術來完成這樣的分組更低的方式？

來源

2012-12-12 creativetim

你如何期望有這樣的選擇器：'body.homepage，@media（min-width：768px）和（max-width：980px）'？這不是有效的CSS。 – cimmanon

我意識到這一點。如果我可以避免的話，我不想重複應用於特定類和斷點的大塊CSS。 – creativetim

你唯一的選擇是使用混入。 – cimmanon

我不是100％確定你要爲輸出，但這僅少定義顏色red一次，它適用於：

@tablet: ~"(min-width: 768px) and (max-width: 980px)"; 
body { 
    aside { color: blue } 

    &.homepage { 
    aside { color: red } 
    } 

    @media @tablet { 
    .homepage; 
    } 
}

此息率CSS：

body aside { 
    color: #0000ff; 
} 
body.homepage aside { 
    color: #ff0000; 
} 
@media (min-width: 768px) and (max-width: 980px) { 
    body aside { 
    color: #ff0000; 
    } 
}

來源

2012-12-12 16:30:12 ScottS

這個伎倆！非常感謝，斯科特。 – creativetim

LESS：你可以用媒體查詢分組一個CSS選擇器嗎？

回答

相關問題