Business background

write the front-end page, my steps are as follows:

1. look at the structure of the blueprint
2. refer to the design drawings and write html structure
3. refer to html write scss structure
4. request data fill content

example

Design

html structure

  <div class="container">
    <!--  -->
    <div class="search">
      <div class="input">
        <input type="text" id="" placeholder="">
        <div class="iconfont"></div>
      </div>
      <button class="btn"></button>
    </div>
    <!--  -->
    <div class="list">
      <div class="item" v-for="item in list">
        <!--  -->
        <div class="img">
          <img :src="item.head_img" mode="widthFix">
        </div>
        <div class="content">
          <!--  -->
          <div class="name">
            {{item.name}}
            <div class="tag" v-for="tag in item.tags">{{tag}}</div>
          </div>
          <!--  -->
          <div class="basicInfo">
            <div class="age">{{item.age}}</div>
            <div class="cite">{{item.city}}</div>
            <div class="job">{{item.job}}</div>
          </div>
          <!--  -->
          <div class="detail">{{item.detail}}</div>
        </div>
      </div>
    </div>
  </div>

scss

.container {
    .search {
        ......
    }
    .list{
        ......
    }
  }

perplexed

after writing html every time, the structure is exactly the same, so we have to write scss again. It"s a lot of work to repeat, and sometimes it"s easy to make mistakes

question

is there any way to quickly generate the scss structure through the scss structure?
means that after I have finished writing html , scss will have it automatically. Is
too lazy < del > ~ < / del > ~

the vscode plug-in can implement this function

• styleFrame
• Prime developed by a friend in mpvue WeChat group today (19-03-02). Thank you