代码拉取完成，页面将自动刷新
废弃❗️，该仓库已经转移到到了github上的assembly-css，当前仓库不会再对其进行更新。
通过组合class方式快速书写css的库 项目采用
scss,gulp构建, 减少了书写大量基本css样式所需要的时间。
直接引入到项目中的极大好处是你可以随时更改引入的quickly-css核心代码来增强你的项目中所需要的css类
npm install quickly-css --save
复制核心代码到项目
lib/index.scss
npm install quickly-css --save
import Vue from 'vue'
//sass
import 'quickly-css/lib/index.scss'
// or
import 'quickly-css/dist/quickly-css.min.css'
<link src="node_modules/quickly-css/dist/quickly-css.min.css">
<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>
<!-- 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>
30kb，项目构建后的quickly-css.min.css大小为42kb
git clone https://gitee.com/zj1024/quickly-css.git
npm install
npm run build
.
├── Blog.md //更新日志
├── CONFIG.md // 项目的配置说明
├── DOC.md // 文档
├── LICENSE
├── README.md
├── dist // 打包输出的文件
│ ├── quickly-css.css
│ └── quickly-css.min.css
├── gulpfile.js
├── lib
│ ├── _reset.scss // 格式化css
│ ├── _style.scss // 全局样式
│ ├── _sundry.scss // 杂项样式
│ ├── _var.scss // 全局scss变量
│ ├── background.scss
│ ├── border.scss
│ ├── box.scss // margin padding
│ ├── cursor.scss // 鼠标样式相关
│ ├── display.scss
│ ├── flex.scss
│ ├── float.scss
│ ├── font-size.scss
│ ├── font-weight.scss
│ ├── index.scss
│ ├── line-height.scss
│ ├── link.scss
│ ├── overflow.scss
│ ├── position.scss
│ ├── size.scss // width height
│ ├── text-align.scss
│ ├── text-color.scss
│ ├── vertical-align.scss
│ ├── visibility.scss
│ └── white-space.scss
├── package-lock.json
└── package.json
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型