不用再写css层级

自动根据html结构生成css层级，专注于更重要的

前端开发的日常工作少不了构建一个个组件和页面。每次看着效果图，写好了自己认为完美的html结构，可是每次都要通过粗糙的传统手法（复制粘贴）去转化html为一份scss层级。

像往常一样写好了一份精美的html

 

示例html

<div class="root">
    <div class="header">
        <img src="#" alt="">
    </div>
    <div class="content">
        <div class="breadcrumb">xxx -> xxx -> xxx</div>
        <div class="side">
            <div class="list">
                <a href="#" class="item">xxx</a>
                <a href="#" class="item">xxx</a>
                <a href="#" class="item">xxx</a>
                <a href="#" class="item">xxx</a>
            </div>
        </div>
        <div class="main">
            <div class="form">
                <div class="form-group">
                    <input type="text">
                </div>
                <div class="form-group">
                    <button>XXX</button>
                </div>
            </div>
        </div>
        <div class="pager">
            <div class="item disabled">上一页</div>
            <div class="item active">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">下一页</div>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            <span class="bold">XXX</span>
            <span>xxx</span>
        </div>
    </div>
</div>

　　我大概想要这样的scss层级是这样的

.header {
  img {
  }
}
.content {
  .breadcrumb {
  }
  .side {
    .list {
      .item {
      }
    }
  }
  .main {
    .form {
      .form-group {
        input {
        }
        button {
        }
      }
    }
  }
  .pager {
    &.disabled {
    }
    &.active {
    }
  }
}
.footer {
  .copyright {
    .bold {
    }
    span {
    }
  }
}

　　

这时候，福利来了，一番广告：

我的git地址：https://github.com/lyuns/generate_css_structure

 

运行方式：

$ npm install
$ npm run start

 

配置参数：

 

配置项	说明
src	源html文件
dist	生成目标目录
filename	目标文件名（*.scss 或 *.less）
selector	根选择器（类似于jquery）

试用这份代码，就可以告别传统的粗糙手法，更高效更便捷的做一名高(偷)效(懒)的前端开发者了，快去试一试吧！