常用的边距属性,参考bootstrap里面类名的定义,大致有下面几种:

.m-0 {
    margin: 0rem;
.mx-0 {
    margin-left: 0rem;
    margin-right: 0rem
.mt-0 {
    margin-top: 0rem;
下面使用工具样式生成常用边距
 
首先定义边距的类型: 主要有margin和padding
 
$spacing-types: (m: margin, p: padding)
定义边距的方向: top、right、bottom、left
 
$spacing-directions: (t: top, r: right, b: bottom, l: left)
定义边距类的基础大小
 
$spacing-base-size: 1rem;
定义边距类的尺寸
 
$spacing-sizes: (0:0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3)
之后是使用定义的变量,动态生成常用的边距类(css)
 
@each $typeKey, $type in $spacing-types{
    // .m-1
    @each $sizeKey, $size in $spacing-sizes{
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $spacing-base-size    
    @each $sizeKey, $size in $spacing-sizes{
        // .mx-0,  .mx-1,  .mx-2 ...
        .#{typeKey}x-#{$sizeKey} {
            .#{$type}-left: $size * $spacing-base-size;
            .#{$type}-right: $size * $spacing-base-size;
		// .my-0,  .my-1,   .my-2  ...
        .#{typeKey}y-#{$sizeKey} {
            .#{$type}-top: $size * $spacing-base-size; 
			.#{$type}-bottom: $size * $spacing-base-size;
	// .mt-1, .mr-1
    @each $directionKey, $direction in $spacing-directions{
        @each $sizeKey, $size in $spacing-sizes{
            // .mt-1{margin-top: 0.25rem}
            .#{$typeKey}#{$directionKey}-#{$sizeKey}{
                #{$type}-#{$direction}: $size * $spacing-base-size;
                    "工具样式"的概念和 SASS(SCSS)在webpack中使用sass安装sass和sass-loader$ npm i sass sass-loader由于使用了脚手架,安装完毕后重启前端即可样式重置其实就是样式的初始化// reset* {  box-sizing: border-box; // 以边框为准. css3盒模型  outline: none; // 不需...
				
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)，否则无法在项目中直接使用。
方案一：在组件中直接使用
在组件中直接使用 SCSS/SASS 是最简单的方式：
<style lang=scss scoped>
</style>
通过 lang 选项可以选择使用的语法： scss/sass。如果希望样式能够在全局范围内生效，就将 scoped 删除。
方案二：在组件中导入 .s
  box-sizing: border-box; // 以边框为准. css3盒模型
  outline: none; // 不需要高亮: 有时候在页面中使用tab切换,a标签可能会出现高亮
html {
  font-size: 13px; // 定义网址的基础字体大小 1rem = 13px
body {
				
其实循环生成css都是定义一个数组，然后遍历生成，主要在于各个语言的调用方式不一样.
这里使用的rem作为基准单位，也可以用px或者其他
_variable.scss文件
// 文件名以下划线开头表示被引用文件，引用时不用加下划线和后缀名
//定义颜色
$colors:(primary: #db9e3f,
  info: #4b67af,
  danger: #791a16,
  blue-1: #1f3695,
  'blue': #4394e4,
  "white": #fff, //当键名与变量名
				
要在Vue中使用postcss-px-to-viewport，您需要完成以下步骤：
1. 安装依赖：首先，您需要安装postcss-px-to-viewport依赖。您可以使用npm或yarn来安装。
   npm install postcss-px-to-viewport --save-dev
   yarn add postcss-px-to-viewport --dev
2. 配置PostCSS：接下来，您需要在项目根目录下创建postcss.config.js文件，并将postcss-px-to-viewport添加到插件列表中。例如：
   ```javascript
   module.exports = {
     plugins: {
       autoprefixer: {},
       "postcss-px-to-viewport": {
         viewportWidth: 750, // 视口宽度
         viewportHeight: 1334, // 视口高度
         unitPrecision: 3, // 保留小数位数
         viewportUnit: 'vw', // 单位
         selectorBlackList: ['.ignore', '.hairlines'], // 排除的选择器
         minPixelValue: 1, // 小于或等于1px时不转换
         mediaQuery: false // 是否转换媒体查询中的单位
   这里，viewportWidth和viewportHeight是视口的宽度和高度。单位为px。unitPrecision是要保留的小数位数。viewportUnit是转换后的单位。selectorBlackList是要排除的选择器列表。minPixelValue是小于或等于多少像素不进行转换。mediaQuery是指是否要转换媒体查询中的单位。
3. 在Vue中使用：现在，您已经完成了配置，可以在Vue中使用了。您可以将CSS样式放入vue组件中，然后在样式中使用px单位。例如：
   ```html
   <style lang="scss" scoped>
   .container {
     width: 750px;
     height: 500px;
     background-color: #fff;
     margin: 0 auto;
   </style>
   当您运行项目时，postcss-px-to-viewport将自动将px转换为vw。