生成通用的边距样式,外边距、内边距全局样式。字体大小全局样式。通用全局样式封装,vue公共样式封装 电脑版发表于:2025/3/13 17:37 **样式代码如下:** ``` <style lang="scss"> /* 外边距、内边距全局样式 ------------------------------- */ @for $i from 1 through 35 { .mt#{$i} { margin-top: #{$i}px !important; } .mr#{$i} { margin-right: #{$i}px !important; } .mb#{$i} { margin-bottom: #{$i}px !important; } .ml#{$i} { margin-left: #{$i}px !important; } .pt#{$i} { padding-top: #{$i}px !important; } .pr#{$i} { padding-right: #{$i}px !important; } .pb#{$i} { padding-bottom: #{$i}px !important; } .pl#{$i} { padding-left: #{$i}px !important; } } /* 字体大小全局样式 ------------------------------- */ @for $i from 10 through 32 { .font#{$i} { font-size: #{$i}px !important; } } </style> ``` 一般都是写到scss文件中,比如app.scss,上面代码我写一个style是做一个示例而已。 **样式使用:** ``` <el-card class="mt15"></el-card> ```