【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中提出來