html - 媒体查询的多重转换

Question

我知道我可以用逗号创建多个转换(比如 width 1s, height 1s)，但是如果我想在媒体查询中使用一个怎么办？

@media screen and (min-width: 800px) {
    #div {
        transition: width 1s;
    }
}
#div {
    transition: height 1s; /* Overrides previous one :( */
}

我怎样才能做到这一点？我是否必须求助于进行 2 个媒体查询(随着原始媒体查询的增加呈指数增长)

@media screen and (max-width: 799px) {
    #div {
        transition: height 1s;
    }
}
@media screen and (min-width: 800px) {
    #div {
        transition: width 1s, height 1s; /* Ugly duplication :( */
    }
}

当然，使用复杂的选择器而不是媒体查询也会有同样的问题。

Answer 1

你可以使用 LESS 来做到这一点

https://github.com/less/less-docs/blob/master/content/features/merge.md

.mixin() {
  transition: height 1s;
}

@media screen and (max-width: 799px) {
    .mixin()
}


@media screen and (min-width: 800px) {
  .mixin();
  transition+: width 1s;
}