/** S 背景颜色 **/ .bg-primary { background-color: $--color-primary; } .bg-white { background-color: $--color-white; } .bg-body { background-color: $--background-color-base; } /** E 背景颜色 **/ /** S 字体颜色 **/ .primary { color: $--color-primary; } .black { color: $--color-black; } .white { color: $--color-white; } .normal { color: $--color-text-primary; } .lighter { color: $--color-text-regular; } .muted { color: $--color-text-secondary; } /** E 字体颜色 **/ .border-bottom { border-bottom: $--border-base; } .border-top { border-top: $--border-base; } .border-left { border-left: $--border-base; } .border-right { border-right: $--border-base; } .border { border: $--border-base; } // 字体字重 @for $i from 100 through 900 { @if $i % 100 == 0 { .weight-#{$i} { font-weight: $i; } } } /** S 字体大小 **/ .xxl { font-size: 18px; } .xl { font-size: 17px; } .lg { font-size: 16px; } .md { font-size: 15px; } .nr { font-size: 14px; } .sm { font-size: 13px; } .xs { font-size: 12px; } .xxs { font-size: 11px; } // 字体大小[19-40] @for $i from 19 through 50 { .font-size-#{$i} { font-size: $i + px; } } /** E 字体大小 **/ // 内、外边距[1-60] @for $i from 0 through 60 { // 只要偶数和能被5整除的数 @if $i % 2 == 0 or $i % 5 == 0 { // 如:m-30 .m-#{$i} { margin: $i + px; } // 如:p-30 .p-#{$i} { padding: $i + px; } @each $short, $long in l left, t top, r right, b bottom { //如: m-l-6 // 外边距 .m-#{$short}-#{$i} { margin-#{$long}: $i + px; } //如: p-l-30 // 内边距 .p-#{$short}-#{$i} { padding-#{$long}: $i + px; } } } } // 行内块元素 .inline { display: inline-block; } // 块元素 .block { display: block; } // 触手 .pointer { cursor: pointer } /** S 弹性布局 **/ .flex { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; align-items: center; } .flex-col { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; } // 定义flex等分 @for $i from 0 through 5 { .flex-#{$i} { flex: $i; } } .flex-none { flex: none; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .col-baseline { align-items: baseline; } .col-center { align-items: center; } .col-top { align-items: flex-start; } .col-bottom { align-items: flex-end; } .col-stretch { align-items:stretch; } .row-center { justify-content: center; } .row-left { justify-content: flex-start; } .row-right { justify-content: flex-end; } .row-between { justify-content: space-between; } .row-around { justify-content: space-around; } /** E 弹性布局 **/ /** S 内容排序方式 **/ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /** E 内容排序方式 **/ /** S 文本行数限制 **/ .line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .line-2 { -webkit-line-clamp: 2; } .line-3 { -webkit-line-clamp: 3; } .line-4 { -webkit-line-clamp: 4; } .line-5 { -webkit-line-clamp: 5; } .line-2, .line-3, .line-4, .line-5 { overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; // 弹性伸缩盒 -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式 } /** E 文本行数限制 **/ /* 中划线 */ .line-through { text-decoration: line-through; } .clearfix:after{ content: ""; display: block; clear: both; visibility: hidden; } .wrapper1180 { width: 1180px; margin: 0 auto; }