開發十年，就只剩下這套架構體系了！ >>>   

直接在scss檔案上覆制這段scss程式碼：

$directions:("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions:("p":"padding", "m":"margin");
//獲取padding margin間隔
[@each](https://my.oschina.net/u/3872079) $dim in $dimensions {
	//迴圈四個方向
	[@each](https://my.oschina.net/u/3872079) $dir in $directions {
		[@for](https://my.oschina.net/362326) $i from 1 through 5 {
			$size: $i*5;
			.#{nth($dim,1)}-#{nth($dir,1)}-#{$size} {
				#{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
			}
		}
	}
}
 

編譯scss檔案得到css檔案，即可得到如下css程式碼：

.p-t-5 { padding-top: 5px; }

.p-t-10 { padding-top: 10px; }

.p-t-15 { padding-top: 15px; }

.p-t-20 { padding-top: 20px; }

.p-t-25 { padding-top: 25px; }

.p-b-5 { padding-bottom: 5px; }

.p-b-10 { padding-bottom: 10px; }

.p-b-15 { padding-bottom: 15px; }

.p-b-20 { padding-bottom: 20px; }

.p-b-25 { padding-bottom: 25px; }

.p-l-5 { padding-left: 5px; }

.p-l-10 { padding-left: 10px; }

.p-l-15 { padding-left: 15px; }

.p-l-20 { padding-left: 20px; }

.p-l-25 { padding-left: 25px; }

.p-r-5 { padding-right: 5px; }

.p-r-10 { padding-right: 10px; }

.p-r-15 { padding-right: 15px; }

.p-r-20 { padding-right: 20px; }

.p-r-25 { padding-right: 25px; }

.m-t-5 { margin-top: 5px; }

.m-t-10 { margin-top: 10px; }

.m-t-15 { margin-top: 15px; }

.m-t-20 { margin-top: 20px; }

.m-t-25 { margin-top: 25px; }

.m-b-5 { margin-bottom: 5px; }

.m-b-10 { margin-bottom: 10px; }

.m-b-15 { margin-bottom: 15px; }

.m-b-20 { margin-bottom: 20px; }

.m-b-25 { margin-bottom: 25px; }

.m-l-5 { margin-left: 5px; }

.m-l-10 { margin-left: 10px; }

.m-l-15 { margin-left: 15px; }

.m-l-20 { margin-left: 20px; }

.m-l-25 { margin-left: 25px; }

.m-r-5 { margin-right: 5px; }

.m-r-10 { margin-right: 10px; }

.m-r-15 { margin-right: 15px; }

.m-r-20 { margin-right: 20px; }

.m-r-25 {