[已解决]如何快速书写scss/sass代码

Question

业务背景

写前端页面，我的步骤是这样的:

1. 看设计图结构
2. 参照设计图写html结构
3. 参照html写scss结构
4. 请求数据填充内容

示例

设计图

html结构

  <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{
        ......
    }
  }

困扰

每次写完html之后，一模一样的结构，又要拿去写一次scss，重复工作量相当的大啊，有时候还容易写错

问题

有没有啥办法，通过html结构快速生成scss结构的？
就是我写完了html之后，scss就自动有了。。。
是不是懒到家了~~

vscode插件可以实现这个功能

• styleFrame
• 今天(19-03-02)在mpvue微信群里一个群友开发的.Prime,表示感谢

Answer 1

这么好的事我也想要

Answer 2

你是个人才啊

Answer 3

可以考虑使用scss的@extend，把一些样式继承过来，局部样式不同可以单独修改覆盖样式