为什么转换不能在较小的屏幕上工作，而不是桌面？

Question

我有以下SASS样式定义：

@import "bulma/sass/utilities/initial-variables.sass";

@mixin show-sidebar-responsive($size) {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: $size;
    background-color: #24344b;
}

.sidebar-container {
    transition: width 1s;
    display: none;
}

@media (min-width: $desktop) and (max-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(250px);
    }
}

@media (min-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(280px);
    }
}

正如您在上面的代码中所看到的，我在不同屏幕大小的宽度上使用转换。从$desktop到$widescreen的转换很好，但是在$desktop以下不起作用，为什么？

我从大疱拿走了断点。

我忘记给什么下定义了？

Answer 1

当您将display从none更改为flex时，转换不适用。在$desktop下面的屏幕大小上，您可以将width设置为0或其他大小，或者使用一些技巧来隐藏元素，但不要将display设置为none。