我可以在CSS中定義<任何東西>？

Question

這裏是我的代碼：

.el { 
    padding-top: 20px; 
} 

@media (max-width: 979px) { 
    .el{ 
     padding: <anything already been> 10px 10px 10px; 
    } 
} 

有什麼作爲<anything already been>使用？

---

我是這樣做的：

@media (max-width: 979px) { 
    .el{ 
     padding-right: 10px; 
     padding-left: 10px; 
     padding-buttom: 10px; 
    } 
} 

但我只是想知道有沒有辦法做到這一點的一條線？

Answer 1

我要說的是，這是不可能的。

繼承將是足夠的替代，但這不能實現，因爲繼承統計所有4個速記屬性。你不能隨意輸入繼承來半推翻它的一部分。

此外，使用填充時，它將始終從padding轉換爲padding-top，padding-left等。這將（如@Pete所述）每次都會覆蓋原始值。

你應該和你的第二個辦法堅持：

@media (max-width: 979px) { 
    .el{ 
     padding-right: 10px; 
     padding-left: 10px; 
     padding-buttom: 10px; 
    } 
} 

Answer 2

世界上沒有辦法做你想做的事情。你可以用custom properties來獲得更多的東西來達到這個目的。

例如：

.el { 
    --paddingTop: 20px; 

    padding: var(--paddingTop, 0) var(--paddingRight, 0) var(--paddingBottom, 0) var(--paddingLeft, 0); 
} 

@media (max-width: 979px) { 
    .el{ 
     --paddingRight: 10px; 
     --paddingBottom: 20px; 
     --paddingLeft: 20px; 
    } 
} 

這將是罰款1使用過的情況，但會給你太多的開銷，要做到這一點無處不海事組織。