在自己开发过程中,经常会对着 UI 切图，一次性将 HTML 骨架给写完，然后在 sass/less 文件中，照着 HTML 代码写一遍 CSS 层级，最后填充样式。

觉得这样麻烦，然后手撕了个 npm 插件，直接将 template 转为 sass 骨架代码

github 地址： https://github.com/wuyic/t2css

使用方法

npm i -D t2css

npx t2css sourceFilePath targetSourceFile

生成前的 Vue 代码

./a.vue 文件 <template>   <div class="testArea">     <div class="instruction i1">       <img class="img" src="@/images/common/[email protected]" alt="">     </div>     <div class="instruction1 i2">       <p class="p">ssds</p>       <img src="" alt="">     </div>     <div>       <div class="is3">         <div class="is33">           <div>             <div class="is333">                 <img src="" alt="">                 <img src="" alt="">                 <img src="" alt="">                 <img src="" alt="">                 <img src="" alt="">                 <img src="" alt="">                 <img src="" alt="">             </div>           </div>         </div>       </div>     </div>   </div> </template> 

生成后的 SCSS 骨架：

.testArea {  .instruction {    &.i1 {    }    .img {    }  }  .instruction1 {    &.i2 {    }    .p {    }    img {    }  }  .is3 {    .is33 {      .is333 {        img {        }      }    }  } }  

大佬有話說 (0)