一个简单的vue3+windi.css库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

30 lines
892 B

/**
* 响应式类,控制元素的显示隐藏
**/
@import (reference) "../var.less";
@xs-only: e('max-width: @{sm}');
@sm-and-up: e('min-width: @{sm}');
@sm-only: e('min-width: @{sm}) and (max-width: @{md}');
@sm-and-down: e('max-width: @{md}');
@md-and-up: e('min-width: @{md}');
@md-only: e('min-width: @{md}) and (max-width: @{lg}');
@md-and-down: e('max-width: @{lg}');
@lg-and-up: e('min-width: @{lg}');
@lg-only: e('min-width: @{lg}) and (max-width: @{xl}');
@lg-and-down: e('max-width: @{xl}');
@xl-only: e('min-width: @{xl}');
@hide-array: xs-only, sm-and-up, sm-only, sm-and-down, md-and-up, md-only, md-and-down, lg-and-up, lg-only, lg-and-down, xl-only;
.hide(@i: 1) when(@i <= length(@hide-array)) {
@name: extract(@hide-array, @i);
.hidden-@{name} {
@media screen and (@@name) {
display: none !important;
}
}
.hide((@i + 1));
}
.hide();