$fonWeight: 这段代码是一个 SCSS(Sassy CSS)代码片段,用于生成一系列字体加粗的类。让我解释一下其中的含义:
$fonWeight
:这是一个变量,包含了一系列字体加粗的值。它包括数字(100 到 900)、关键字(bold 和 bolder),这些值用于控制文本的粗细。@for $i from 1 through length($fonWeight) { ... }
:这是一个 SCSS 循环,会迭代$fonWeight
变量中的每个值。生成一系列类,类名包含了字体加粗的值。例如,对于每个字体加粗值,会生成如下类:
.fontWeight100
:对应字体加粗值为 100 的类。.fontWeight200
:对应字体加粗值为 200 的类。.fontWeight300
:对应字体加粗值为 300 的类。.fontWeight400
:对应字体加粗值为 400 的类。.fontWeight500
:对应字体加粗值为 500 的类。.fontWeight600
:对应字体加粗值为 600 的类。.fontWeight700
:对应字体加粗值为 700 的类。.fontWeight800
:对应字体加粗值为 800 的类。.fontWeight900
:对应字体加粗值为 900 的类。.fontWeightbold
:对应字体加粗值为 bold 的类。.fontWeightbolder
:对应字体加粗值为 bolder 的类。
通过这些类,可以轻松地在 HTML 元素中设置不同粗细的字体。
/* 边距 */
$boxSize: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60;
@for $i from 1 through length($boxSize) {
$size_: 0;
@if nth($boxSize, $i) !=0 {
$size_: calc(nth($boxSize, $i) * 1px);
}
// padding
.common-p-#{nth($boxSize, $i)} {
padding: $size_;
}
.common-p-tb-#{nth($boxSize, $i)} {
padding-top: $size_;
padding-bottom: $size_;
}
.common-p-lr-#{nth($boxSize, $i)} {
padding-left: $size_;
padding-right: $size_;
}
.common-p-l-#{nth($boxSize, $i)} {
padding-left: $size_;
}
.common-p-b-#{nth($boxSize, $i)} {
padding-bottom: $size_;
}
.common-p-r-#{nth($boxSize, $i)} {
padding-right: $size_;
}
.common-p-t-#{nth($boxSize, $i)} {
padding-top: $size_;
}
/* margin */
.common-m-#{nth($boxSize, $i)} {
margin: $size_;
}
.common-m-tb-#{nth($boxSize, $i)} {
margin-top: $size_;
margin-bottom: $size_;
}
.common-m-lr-#{nth($boxSize, $i)} {
margin-left: $size_;
margin-right: $size_;
}
.common-m-l-#{nth($boxSize, $i)} {
margin-left: $size_;
}
.common-m-b-#{nth($boxSize, $i)} {
margin-bottom: $size_;
}
.common-m-r-#{nth($boxSize, $i)} {
margin-right: $size_;
}
.common-m-t-#{nth($boxSize, $i)} {
margin-top: $size_;
}
}
/* 文字大小 */
$fontSize: 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40;
@for $j from 1 through length($fontSize) {
.fontSize#{nth($fontSize, $j)} {
font-size: calc(nth($fontSize, $j) * 1px);
}
}
/* 字体加粗 */
$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;
@for $i from 1 through length($fonWeight) {
.fontWeight#{nth($fonWeight, $i)} {
font-weight: nth($fonWeight, $i);
}
}
.fontWeight000 {
font-weight: normal;
}
/* img 大小 方形 */
@for $i from 1 through 160 {
.common-img-#{$i} {
display: block;
width: calc($i * 1px);
height: calc($i * 1px);
}
}
/* 圆角 */
@for $i from 1 through 49 {
.common-radius-#{$i} {
border-radius: calc($i * 1px);
}
}
.common-radius--50 {
border-radius: 50%;
}
/* 修改滚动条 */
$scrollSize: 2, 4, 6, 8, 12;
// $scrollBackground: 2, 4, 6, 8;
@for $j from 1 through length($scrollSize) {
$size: calc(nth($scrollSize, $j) / 2);
.common-scroll-#{nth($scrollSize, $j)} {
&::-webkit-scrollbar {
width: calc(nth($scrollSize, $j) * 1px);
height: calc(nth($scrollSize, $j) * 1px);
background-color: transparent;
border-radius: calc($size * 1px);
}
&::-webkit-scrollbar-track {
border-radius: calc($size * 1px);
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #cacdd1;
border-radius: calc($size * 1px);
}
&::-webkit-scrollbar-thumb:hover {
background-color: #a5a5a5;
}
}
}
/* 带点* */
$spot: red, black, blue;
@for $j from 1 through length($spot) {
.spot-#{"" + nth($spot, $j)} {
position: relative;
&::before {
position: absolute;
content: '*';
color: nth($spot, $j);
top: 0;
left: 0;
}
}
}
$sizeColor: #4e86ef, #999999, #faad14, #ff4d4d, #808080, #222222, #333333, #ffffff, #f3c14c;
$sizeName: 'primary', 'info', 'warning', 'danger', '808080', '222', '333', 'ffffff', f3c14c;
@for $i from 1 through length($sizeColor) {
.color-#{nth($sizeName, $i)} {
color: nth($sizeColor, $i);
}
.back-#{nth($sizeName, $i)} {
background-color: nth($sizeColor, $i);
}
}
.common-height {
height: fit-content;
}
.common-width {
width: fit-content;
}
//
.common-column {
display: flex;
flex-direction: column;
}
.common-a-c-between {
display: flex;
align-content: space-between;
}
.common-a-center {
display: flex;
align-items: center;
}
.common-wrap {
flex-wrap: wrap;
}
.common-a-start {
display: flex;
align-content: flex-start;
}
.common-a-baseline {
display: flex;
align-items: baseline;
}
.common-aj-center {
display: flex;
align-items: center;
justify-content: center;
}
.common-j-center {
display: flex;
justify-content: center;
}
.common-j-between {
display: flex;
justify-content: space-between;
}
.common-j-around {
display: flex;
justify-content: space-around;
}
.common-j-evenly {
display: flex;
justify-content: space-evenly;
}
.common-ac-jbet {
display: flex;
align-items: center;
justify-content: space-between;
}
.common-auto {
overflow: auto;
}
$clamp: 1, 2, 3, 4, 5, 6;
@for $i from 1 through length($clamp) {
.common-clamp-#{nth($clamp, $i)} {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: nth($clamp, $i);
overflow: hidden;
text-overflow: ellipsis;
}
}
.init-aBASE-jB {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.word-wrap {
white-space: pre-wrap;
}
.word-nowrap {
white-space: nowrap
}
.disabled {
user-select: none;
}
.common-dailog-f5 {
.crop-dialog {
background: #F5F5F5;
.crop-dialog__header {
// border-bottom: 1px solid #e5e5e5;
font-size: 16px !important;
font-weight: bold;
color: #333333;
}
.crop-dialog__body {
border-top: 1px solid #e5e5e5;
}
}
}
.common-dailog-white .crop-dialog {
background: #fff;
.crop-dialog__header {
// border-bottom: 1px solid #e5e5e5;
font-size: 16px !important;
font-weight: bold;
color: #333333;
}
.crop-dialog__body {
border-top: 1px solid #f3f4f6;
}
}
.common-dailog-white.common-dailog-whiteHeader .crop-dialog {
.crop-dialog__header {
background: #fff;
}
}
.common-dailog-padding-0 .crop-dialog {
.crop-dialog__body {
padding: 0;
}
}
$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;
@for $i from 1 through length($fonWeight) {
.common-dailog-white.common-dailog-header#{nth($fonWeight, $i)} .crop-dialog {
.crop-dialog__header {
font-weight: nth($fonWeight, $i);
}
}
}
// 无定义边距 ***
@for $a from 1 through 100 {
.init-p-#{$a} {
padding-left: calc($a * 1px);
padding-right: calc($a * 1px);
padding-top: calc($a * 1px);
padding-bottom: calc($a * 1px);
}
.init-p-lr-#{$a} {
padding-left: calc($a * 1px);
padding-right: calc($a * 1px);
}
.init-p-tb-#{$a} {
padding-top: calc($a * 1px);
padding-bottom: calc($a * 1px);
}
.init-p-t-#{$a} {
padding-top: calc($a * 1px);
}
.init-p-b-#{$a} {
padding-bottom: calc($a * 1px);
}
.init-p-l-#{$a} {
padding-left: calc($a * 1px);
}
.init-p-r-#{$a} {
padding-right: calc($a * 1px);
}
// margin
.init-m-#{$a} {
margin-left: calc($a * 1px);
margin-right: calc($a * 1px);
margin-top: calc($a * 1px);
margin-bottom: calc($a * 1px);
}
.init-m-lr-#{$a} {
margin-left: calc($a * 1px);
margin-right: calc($a * 1px);
}
.init-m-tb-#{$a} {
margin-top: calc($a * 1px);
margin-bottom: calc($a * 1px);
}
.init-m-t-#{$a} {
margin-top: calc($a * 1px);
}
.init-m-b-#{$a} {
margin-bottom: calc($a * 1px);
}
.init-m-l-#{$a} {
margin-left: calc($a * 1px);
}
.init-m-r-#{$a} {
margin-right: calc($a * 1px);
}
}
.fontColor {
color: var(--color);
}