101 lines
1.7 KiB
SCSS
101 lines
1.7 KiB
SCSS
@use './variables.scss' as *;
|
||
|
||
// // 水平垂直居中
|
||
// @mixin flex-center {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// }
|
||
|
||
// // 单行省略
|
||
// @mixin text-ellipsis {
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
// }
|
||
|
||
// // 多行省略
|
||
// @mixin line-ellipsis($line: 2) {
|
||
// display: -webkit-box;
|
||
// -webkit-line-clamp: $line;
|
||
// -webkit-box-orient: vertical;
|
||
// overflow: hidden;
|
||
// }
|
||
|
||
// // 适配移动端1px边框
|
||
// @mixin border-1px($color:#eee) {
|
||
// position: relative;
|
||
// &::after {
|
||
// content: '';
|
||
// position: absolute;
|
||
// left: 0;
|
||
// bottom: 0;
|
||
// width: 100%;
|
||
// height: 1px;
|
||
// background: $color;
|
||
// transform: scaleY(0.5);
|
||
// }
|
||
// }
|
||
|
||
// 全平台响应式 Mixin（手机+平板+PC）
|
||
@mixin m1 {
|
||
@media screen and (max-width: 767px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin gt768 {
|
||
@media screen and (min-width: 768px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin m768-1023 {
|
||
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin m1024-1439 {
|
||
@media screen and (min-width: 1024px) and (max-width: 1439px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin lt1024 {
|
||
@media screen and (max-width: 1025px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin gt1024 {
|
||
@media screen and (min-width: 1024px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin gt1440 {
|
||
@media screen and (min-width: 1440px) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
@mixin auto-space($prop) {
|
||
// 默认手机
|
||
#{$prop}: $space-xs;
|
||
|
||
// 平板 768-1023
|
||
@include m768-1023 {
|
||
#{$prop}: $space-sm;
|
||
}
|
||
|
||
// PC 1024-1439
|
||
@include m1024-1439 {
|
||
#{$prop}: $space-md;
|
||
}
|
||
|
||
// 大屏 1440+
|
||
@include gt1440 {
|
||
#{$prop}: $space-lg;
|
||
}
|
||
} |