我有以下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
以下不起作用,为什么?
我从bulma那里拿走了断点。
我忘了定义什么?
当您将display
从none
更改为flex
时,转换不适用。在$desktop
以下的屏幕尺寸上,您可以将width
设置为0
或其他一些尺寸或使用一些技巧来隐藏元素,但不要将display
设置为无。