简介
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中提出来
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。