一個可以自動生成css樣式的外掛happycss
摘要：
一直在頁面寫css, 重複寫著樣式，發現佈局中，特別是h5,大量的樣式都是margin,padding,width,height, 而，當我們需要給一個標籤寫樣式的時候，避免內聯樣式，我們又需要取class名，對於英語不是特別好的同學，可能會特別苦惱。好了，有了這款外掛，這些都不是問題！
...
一直在頁面寫css, 重複寫著樣式，發現佈局中，特別是h5,大量的樣式都是margin,padding,width,height, 而，當我們需要給一個標籤寫樣式的時候，避免內聯樣式，我們又需要取class名，對於英語不是特別好的同學，可能會特別苦惱。好了，有了這款外掛，這些都不是問題！
# happycss
這是一款可以自動生成css樣式的外掛，你只需要在 vue中寫入 class="h10", 就會自動生成width: 10px;
預設單位為px,如果你需要使用%，請新增如 class="h10p",則會生成 width: 10%
預設生成路徑為 /src/assets/css/happycss.css
預設匯出路徑為 /src/main.js
## Install
npm install happycss
yarn add happycss
## webpack config
const happycss = require('happycss')
```
module.exports = {
// ...
plugins: [
new happycss({
// cssPath: './src/assets/css/happycss.css'
// importPath: './src/main.js'
}),
]
}
```
##具體規則如下
| 寫法 | 生成 |
| class="w10" | .w10 { width: 10px } |
| class="w10p" | .w10 { width: 10% } |
| class="h10" | .h10 { height: 10px } |
| class="mt10" | .mt { margin-top: 10px } |
| class="pt10" | .pt { padding-top: 10px } |
| class="lh10" | .lh10 { line-height: 10px } |
##
github地址 ： https://github.com/wenfangcao/happycss
歡迎 issue\star:clap::clap::clap: