如何防止媒體查詢中的CSS代碼重複？

我想開發自己的網格系統。這是我的第一次嘗試，所以也許我錯過了一些東西。這是我的CSS：如何防止媒體查詢中的CSS代碼重複？

.column-1 { 
    width: 6.86666666667%; 
} 

.column-2 { 
    width: 15.3333333333%; 
} 

// More such columns 

@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    width: 6.86666666667%; 
    } 
    .column-s-2 { 
    width: 15.3333333333%; 
    } 
}

正如你所看到的值重複，但類名不同。有沒有什麼辦法可以避免這種重複，因爲每增加一個班都會變得越來越複雜。

來源

2016-04-19 SanJeet Singh

如果你願意使用CSS預處理器，它將使實現網格對你來說更容易。下面是一個[示例]（http://www.sitepoint.com/creative-grid-system-sass-calc/） – timolawl

但是要直接回答你的問題，我不明白你爲什麼不能簡單地使用同一個類如果它導致相同的值。 – timolawl

我希望它有不同的寬度在不同的大小有點像Bootstrap。如果有人在同一個元素上使用「column-4 column-s-6」。然後，元素將根據屏幕尺寸具有不同的寬度。 –

您可以通過分組選擇避免一些重複的：

.column-1, 
.column-s-1 { 
    width: 6.86666666667%; 
} 

.column-2, 
.column-s-2 { 
    width: 15.3333333333%; 
} 

// More such columns 
@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    /* only properties characteristic for this width*/ 
    } 
}

另一種選擇是使用LESS或SASS

來源

2016-04-19 10:07:33 lukbl

如何防止媒體查詢中的CSS代碼重複？

回答

相關問題