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关闭的情况下使用，但是会给你太多的开销，想要在任何地方都这样做。

我可以在CSS中定义<anything already =“”been =“”>吗？

2 个答案: