業(yè)務(wù)背景

寫前端頁面，我的步驟是這樣的:

1. 看設(shè)計(jì)圖結(jié)構(gòu)
2. 參照設(shè)計(jì)圖寫html結(jié)構(gòu)
3. 參照html寫scss結(jié)構(gòu)
4. 請求數(shù)據(jù)填充內(nèi)容

示例

設(shè)計(jì)圖

html結(jié)構(gòu)

  <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>
          <!-- 年齡等基礎(chǔ)信息 -->
          <div class="basicInfo">
            <div class="age">{{item.age}}歲</div>
            <div class="cite">{{item.city}}</div>
            <div class="job">{{item.job}}</div>
          </div>
          <!-- 詳細(xì)描述 -->
          <div class="detail">{{item.detail}}</div>
        </div>
      </div>
    </div>
  </div>

scss

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

困擾

每次寫完html之后，一模一樣的結(jié)構(gòu)，又要拿去寫一次scss，重復(fù)工作量相當(dāng)?shù)拇蟀?，有時候還容易寫錯

問題

有沒有啥辦法，通過html結(jié)構(gòu)快速生成scss結(jié)構(gòu)的？
就是我寫完了html之后，scss就自動有了。。。
是不是懶到家了~~