12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- // 定义基础单位和最大类数
- $base-unit: 4px;
- $max-classes: 10;
- // 生成 padding-left (pl) 类
- @for $i from 0 through $max-classes {
- .pl-#{$i} {
- padding-left: $base-unit * $i !important;
- }
- .ml-#{$i} {
- margin-left: $base-unit * $i !important;
- }
- .pr-#{$i} {
- padding-right: $base-unit * $i !important;
- }
- .mr-#{$i} {
- margin-right: $base-unit * $i !important;
- }
- .pt-#{$i} {
- padding-top: $base-unit * $i !important;
- }
- .mt-#{$i} {
- margin-top: $base-unit * $i !important;
- }
- .pb-#{$i} {
- padding-bottom: $base-unit * $i !important;
- }
- .mb-#{$i} {
- margin-bottom: $base-unit * $i !important;
- }
- .pa-#{$i} {
- padding: $base-unit * $i !important;
- }
- .ma-#{$i} {
- margin: $base-unit * $i !important;
- }
- .px-#{$i} {
- padding-left: $base-unit * $i !important;
- padding-right: $base-unit * $i !important;
- }
- .mx-#{$i} {
- margin-left: $base-unit * $i !important;
- margin-right: $base-unit * $i !important;
- }
- .py-#{$i} {
- padding-top: $base-unit * $i !important;
- padding-bottom: $base-unit * $i !important;
- }
- .my-#{$i} {
- margin-top: $base-unit * $i !important;
- margin-bottom: $base-unit * $i !important;
- }
- }
- .cursor-pointer {
- cursor: pointer;
- }
- .white {
- background-color: white;
- }
- .text-right {
- text-align: right;
- }
- .text-center {
- text-align: center;
- }
- .text-left {
- text-align: left;
- }
- .text-justify {
- text-align: justify;
- }
- .text-nowrap {
- white-space: nowrap;
- }
- .d-flex {
- display: flex;
- }
|