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