使用Less实现变量样式

今天在根据UI进行页面还原时遇到需要很多微调的地方 margin padding 某个数量的值，有10px 8px 20px 这些，往往为了微调一个样式写一个样式修比较麻烦，通过调研发现直接引入less的变量实现动态样式就可以了。 以下是初始实现的代码：

rule.less

/**动态的class*/
.loop(@counter) when (@counter > 0) {
    /**padding*/
    .pd-@{counter} {
      padding: (1px * @counter);
    }
    .pdt-@{counter} {
      padding-top: (1px * @counter);
    }
    .pdr-@{counter} {
      padding-right: (1px * @counter);
    }
    .pdb-@{counter} {
      padding-bottom: (1px * @counter);
    }
    .pdl-@{counter} {
      padding-left: (1px * @counter);
    }
    .pdlr-@{counter} {
        padding-left: (1px * @counter);
        padding-right: (1px * @counter);
    }
    .pdtb-@{counter} {
        padding-top: (1px * @counter);
        padding-bottom: (1px * @counter);
    }
    /**margin*/
    .mg-@{counter} {
      margin: (1px * @counter);
    }
    .mgt-@{counter} {
      margin-top: (1px * @counter);
    }
    .mgr-@{counter} {
      margin-right: (1px * @counter);
    }
    .mgb-@{counter} {
      margin-bottom: (1px * @counter);
    }
    .mgl-@{counter} {
      margin-left: (1px * @counter);
    }
    .mglr-@{counter} {
        margin-left: (1px * @counter);
        margin-right: (1px * @counter);
    }
    .mgtb-@{counter} {
        margin-top: (1px * @counter);
        margin-bottom: (1px * @counter);
    }
    /**font-size*/
    .fts-@{counter} {
      font-size: (1px * @counter);
    }
    .loop((@counter - 1));    // 递归调用自身
  }
   
  .loop(200);

在需要引入的文件里引入就可以了 App.vue

@import url('./assets/styles/rules'); // 变量样式

使用方式：

<!-- 下面的 mgr-8 就代表着 margin-right:8px -->
 <a class="edit-tab mgr-8" @click="openEdit(record)">详情</a>
 <a class="edit-tab mgr-8">商品列表</a>

在某些UI组件引入下我们的变量样式可能无效,以下提供了!important版本： ruleImportant.less

/**动态的class*/
.loop(@counter) when (@counter > 0) {
    /**padding*/
    .pd-@{counter} {
      padding: (1px * @counter) !important;
    }
    .pdt-@{counter} {
      padding-top: (1px * @counter) !important;
    }
    .pdr-@{counter} {
      padding-right: (1px * @counter) !important;
    }
    .pdb-@{counter} {
      padding-bottom: (1px * @counter) !important;
    }
    .pdl-@{counter} {
      padding-left: (1px * @counter) !important;
    }
    .pdlr-@{counter} {
        padding-left: (1px * @counter) !important;
        padding-right: (1px * @counter) !important;
    }
    .pdtb-@{counter} {
        padding-top: (1px * @counter) !important;
        padding-bottom: (1px * @counter) !important;
    }
    /**margin*/
    .mg-@{counter} {
      margin: (1px * @counter) !important;
    }
    .mgt-@{counter} {
      margin-top: (1px * @counter) !important;
    }
    .mgr-@{counter} {
      margin-right: (1px * @counter) !important;
    }
    .mgb-@{counter} {
      margin-bottom: (1px * @counter) !important;
    }
    .mgl-@{counter} {
      margin-left: (1px * @counter) !important;
    }
    .mglr-@{counter} {
        margin-left: (1px * @counter) !important;
        margin-right: (1px * @counter) !important;
    }
    .mgtb-@{counter} {
        margin-top: (1px * @counter) !important;
        margin-bottom: (1px * @counter) !important;
    }
    /**font-size*/
    .fts-@{counter} {
      font-size: (1px * @counter) !important;
    }
    .loop((@counter - 1));    // 递归调用自身
  }
   
  .loop(200);