如何快速書(shū)寫(xiě)scss/sass代碼

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

寫(xiě)前端頁(yè)面，我的步驟是這樣的:

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

示例

設(shè)計(jì)圖

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

  <div class="container">
    <!-- 搜索框 -->
    <div class="search">
      <div class="input">
        <input type="text" id="" placeholder="請(qǐng)輸入編號(hào)、昵稱(chēng)">
        <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">
          <!-- 昵稱(chēng) -->
          <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{
        ......
    }
  }

困擾

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

問(wèn)題

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