【quickly-css】（极易上手）一款使用Sass构建的高效开发CSS库

简介

---

quickly-css是一个快速书写CSS样式的类库，项目采用scss,gulp构建，quickly-css方便了我们日常开发重复书写css的烦恼，它类似于bootstrap但又不同于bootstrap。

基本的使用

---

<div class="w-full text-red">test</div>

相当于：

<div class="test">test</div>
<style>
.test {
  width: 100%;
  color: #f35958;
}
</style>

快速书写三栏布局

---

前端面试css中出现最多的一道css布局问题就是三栏布局，接下来我们通过三栏布局来体会一下quickly-css开发带来的高效

• 原生从零开始构建

<style>
  .wrapper {
    display: flex;
  }
  .left, .right {
    width: 200px;
    background: #f2f2f2
  }
  .center {
    flex: 1;
    background: #188eee
  }
</style>
<section class="wrapper">
  <div class="left">1</div>
  <div class="center">1</div>
  <div class="right">1</div>
</section>

• 引入quickly-css

<!-- use quickly-css -->
<style src="quickly-css/dist/quickly-css.css"></style>

<section class="flex j-between">
  <div class="w-200"></div>
  <div class="flex-1"></div>
  <div class="w-200"></div>
</section>

优点

• 几乎不需要再创建style标签书写css
• 代码样式逻辑更加清晰
• 易维护（quickly-css）
• 目前vue项目使用打包后体积为30kb，项目构建后的quickly-css.min.css大小为42kb

最后

项目地址 如果你在开发中觉得好用记得点一个star，或者有不足的地方可以Issues中提出来