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

2024年5月3日 141次阅读 来源: zj1024

简介

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中提出来

    原文作者：zj1024
    原文地址: https://segmentfault.com/a/1190000018687217
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞