Files
template-MP-ts/common/styles/base.scss
2025-09-29 14:05:25 +08:00

128 lines
2.5 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 定义内外边距历遍1-40
@for $i from 0 through 40 {
// 只要双数和能被5除尽的数
@if $i % 2==0 or $i % 5==0 {
// 得出u-margin-30或者u-m-30
.w-#{$i} {
width: calc($i * 1%) !important;
}
.p-x-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
}
.p-y-#{$i} {
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-x-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
}
.m-y-#{$i} {
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.m-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.p-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-l-#{$i} {
margin-left: $i + rpx !important;
}
.m-t-#{$i} {
margin-top: $i + rpx !important;
}
.m-r-#{$i} {
margin-right: $i + rpx !important;
}
.m-b-#{$i} {
margin-bottom: $i + rpx !important;
}
.p-l-#{$i} {
padding-left: $i + rpx !important;
}
.p-t-#{$i} {
padding-top: $i + rpx !important;
}
.p-r-#{$i} {
padding-right: $i + rpx !important;
}
.p-b-#{$i} {
padding-bottom: $i + rpx !important;
}
.l-p-#{$i} {
letter-spacing: $i + rpx !important;
}
.z-i-#{$i} {
z-index: $i;
}
.l-h-#{$i} {
line-height: $i + rpx !important;
}
.r-#{$i} {
right: $i + rpx !important;
}
.l-#{$i} {
left: $i + rpx !important;
}
.t-#{$i} {
top: $i + rpx !important;
}
.b-#{$i} {
bottom: $i + rpx !important;
}
}
}
// 定义字体(rpx)单位大于或等于20的都为rpx单位字体
@for $i from 9 through 60 {
.font-#{$i} {
font-size: $i + rpx !important;
}
}
// 圆角
@for $i from 4 through 60 {
.rounded-#{$i} {
border-radius: $i + rpx;
}
}
// 多行文本溢出
@for $i from 1 through 5 {
.over-line-#{$i} {
width: 100%;
height: calc($i * 1em + 0.5em);
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: $i;
overflow: hidden;
-webkit-box-orient: vertical;
}
}