怎么搭建支付网站,网站未备案怎么访问,婚纱网站设计目标,赤峰市宁城县住房和建设局网站$fonWeight: 这段代码是一个 SCSS#xff08;Sassy CSS#xff09;代码片段#xff0c;用于生成一系列字体加粗的类。让我解释一下其中的含义#xff1a; $fonWeight#xff1a;这是一个变量#xff0c;包含了一系列字体加粗的值。它包括数字#xff08;100 到 900…
$fonWeight: 这段代码是一个 SCSSSassy 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);
}
