Today, when I was restoring the page according to the UI, I encountered a lot of fine tuning where the margin padding was a certain number of values, such as 10px, 8px and 20px. It was often troublesome to write a style modification in order to fine tune a style. Through research, I found that it was ok to directly introduce the variable of less to achieve the dynamic style. Here is the code for the initial implementation:

rule.less

/** dynamic 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));    // Call itself recursively
  }
   
  .loop(200);
Copy the code

Just import app.vue in the file you need to import

@import url('./assets/styles/rules'); // Variable style
Copy the code

Usage:


<! Margin-right :8px --> margin-right:8px -->
 <a class="edit-tab mgr-8" @click="openEdit(record)">details</a>
 <a class="edit-tab mgr-8">List of goods</a>
Copy the code

Our variable styles may not work with the introduction of some UI components, which are provided below! Important version: ruleimportant.less

/** dynamic 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));    // Call itself recursively
  }
   
  .loop(200);


Copy the code