確保專案能使用scss

然後建立一個名為 total.scss 的scss樣式檔案

將以下程式碼放入

 1 $spacing-types: (                //型別
 2   m: margin,
 3   p: padding
 4 );
 5 $spacing-directions: (          //位置
 6   t: top,
 7   b: bottom,
 8   l: left,
 9   r: right
10 );
11 
12 $spacing-base-size : 10px;      //基數
13 $spacing-sizes: (               //需要的邊距可以新增
 
14     0: 0,
15     1: 1,
16     2: 2,
17     3: 3,
18     4: 4,
19     5: 5
20   );
21   
22 //   迴圈出 margin 與 padding 的各類值
23 
24   @each $typeKey, $type in $spacing-types {
25     // m-1{margin:10px} || p-5{padding:50px}
26     @each $sizeKey, $size in $spacing-sizes {
27       .#{$typeKey}-#{$sizeKey} {
 
28         #{$type}: $size * $spacing-base-size;
29       }
30     }
31     // mx-1{marfin-left:10px;marfin-right:10px} || px-5{padding-left:50px;padding-right:50px;}
32     @each $sizeKey, $size in $spacing-sizes {
33       .#{$typeKey}x-#{$sizeKey} {
34         #{$type}-left: $size * $spacing-base-size;
 
35         #{$type}-right: $size * $spacing-base-size;
36       }
37     }
38   
39     // my-1{marfin-top:10px;marfin-bottom:10px} || py-5{padding-top:50px;padding-bottom:50px;}
40     @each $sizeKey, $size in $spacing-sizes {
41       .#{$typeKey}y-#{$sizeKey} {
42         #{$type}-top: $size * $spacing-base-size;
43         #{$type}-bottom: $size * $spacing-base-size;
44       }
45     }
46     // mt-1 { margin-top: 10px } || pb-5{paddding-bottom:50px;}||ml-2{margin-left:20px}||pr-4{padding-right:40px}
47     @each $directionsKey, $directions in $spacing-directions {
48       @each $sizeKey, $size in $spacing-sizes {
49         .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
50           #{$type}-#{$directions}: $size * $spacing-base-size;
51         }
52       }
53     }
54   }

使用的時候，在main.js檔案內引用，

然後直接在 標籤的 class 裡面新增 對應類名 就可以

例如：