輕量級超級 css 工具
借鑑element主題做的. 輕量級超級簡單的 css 工具
使用
<link rel="stylesheet" href="cc-css-tools.css">
複製程式碼Github 地址
另一個 輕量級 layout 佈局 css
演示地址
jian22446688.github.io/ele-layout-…
它的痛點
- 對於每一個div 我們都要寫對應的css類。 這個在開發的過程中非常浪費時間，並且不好維護。
用scss公共庫實現樣式和業務元件解耦， 快速提高開發效率！ 對於每一個div 我們都要寫對應的css類。 這個在開發的過程中非常浪費時間，並且不好維護。
我們發現專案的樣式和元件耦合，導致每一個元件都有大量的css ,在這些css中絕大部分都是font-size、 padding 、margin、flex、color... 我們能不能像個辦法 把這些常用的樣式全部整合，這樣我們就可以把所有的樣式都從公共類中引用了。
把高頻的樣式整合到一個公共樣式檔案中
我們做了一個公共樣式檔案， 幾乎所有高頻的css都放進去了。
真實的使用體驗 對於一般管控系統 比如基於element-ui ant-design 基本可以做到幾乎不用寫額外的樣式 對於H5 css樣式數量也幾乎可以做到減少一半
- 只需要引入一個公共檔案 足夠簡單
- 幾乎每一個專案都能用到這些公共樣式 使用足夠高頻
- 自從用了它，可以早點下班啦！
- 一次生成，到處複製。
說有的 class 字首都是 cc-***
size 檔案
| 屬性名 | 簡寫名 | 說明 |
|---|---|---|
| margin | mar | mar-n |
| margin: 0 0 | mar | mar-n-n |
| margin-top | mar-t | mar-t-n |
| margin-bottom | mar-b | mar-b-n |
| margin-left | mar-l | mar-l-n |
| margin-right | mar-r | mar-r-n |
| padding | pad | pad-n |
| padding: 0 0 | pad | pad-n-n |
| padding-top | pad-t | pad-t-n |
| padding-bottom | pad-b | pad-b-n |
| padding-left | pad-l | pad-l-n |
| padding-right | pad-r | pad-r-n |
| height | h | h-n |
| width | w | w-n |
| top | t | t-n |
| bottom | b | t-n |
| left | l | l-n |
| right | r | r-n |
| font-size | f-s${n} | n = 8 + 2 -- n = 30 |
| box-shadow | bs-b | -- |
| box-shadow | bs-d | -- |
| box-shadow | bs-l | -- |
| border | bc-b | -- |
| border | bc-l | -- |
| border-radius | br-0 | -- |
| border-radius | br-2 | -- |
| border-radius | br-4 | -- |
other 檔案
| 屬性名 | 簡寫名 | 說明 |
|---|---|---|
| pointer-events | click--invalid | pointer-events:none |
| user-select | onselect | user-select: none |
| float | f--left | float:left |
| float | f--right | float:right |
| position | pos--a | position:absolute |
| position | pos--r | position:relative |
| position | pos--f | position:fixed |
| position | pos--s | position:static |
| position | pos--i | position:inherit |
| cursor | cur--a | cursor:auto |
| cursor | cur--c | cursor:crosshair |
| cursor | cur--d | cursor:default |
| cursor | cur--p | cursor:pointer |
| cursor | cur--m | cursor:move |
| cursor | cur--t | cursor:text |
| cursor | cur--w | cursor:wait |
| cursor | cur--h | cursor:help |
| font-weight | fw--n | font-weight:normal |
| font-weight | fw--b | font-weight:bold |
| font-weight | fw--l | font-weight:lighter |
| text-align | ta--c | text-align:center |
| text-align | ta--l | text-align:left |
| text-align | ta--r | text-align:right |
| text-decoration | td--o | text-align:overline |
| text-decoration | td--l | text-align:line-through |
| text-decoration | td--u | text-align:underline |
| text-decoration | td--n | text-align:none |
| overflow | ov--v | overflow:visible |
| overflow | ov--h | overflow:hidden |
| overflow | ov--s | overflow:scroll |
| overflow | ov--a | overflow:auto |
common 檔案
| 屬性名 | 簡寫名 | 說明 |
|---|---|---|
| pointer-events | click--invalid | pointer-events:none |
| user-select | onselect | user-select: none |
| float | f--left | float:left |
| float | f--right | float:right |
| text-overflow | t-no-wrap | 文字不換行 |
| text-overflow | t-mr-2 | 文字顯示2行 |
| text-overflow | t-mr-3 | 文字顯示3行 |
color 檔案
| 屬性名 | 簡寫名 | 說明 |
|---|---|---|
| background-color | bg-w | #FFFFFF |
| background-color | bg-b | #000000 |
| background-color | bg-p | #409EFF |
| background-color | bg-s | #67C23A |
| background-color | bg-e | #E6A23C |
| background-color | bg-d | #F56C6C |
| background-color | bg-i | #909399 |
| background-color | bg-l1 | #53a8ff |
| background-color | bg-l2 | #66b1ff |
| background-color | bg-l3 | #79bbff |
| background-color | bg-l4 | #8cc5ff |
| background-color | bg-l5 | #a0cfff |
| background-color | bg-l6 | #b3d8ff |
| background-color | bg-l7 | #c6e2ff |
| background-color | bg-l8 | #d9ecff |
| background-color | bg-l9 | #ecf5ff |
| background-color | bg-t1 | #303133 |
| background-color | bg-t2 | #606266 |
| background-color | bg-t3 | #909399 |
| background-color | bg-t4 | #C0C4CC |
| color | tc-w | #FFFFFF |
| color | tc-b | #000000 |
| color | tc-p | #409EFF |
| color | tc-s | #67C23A |
| color | tc-e | #E6A23C |
| color | tc-d | #F56C6C |
| color | tc-i | #909399 |
| color | tc-l1 | #53a8ff |
| color | tc-l2 | #66b1ff |
| color | tc-l3 | #79bbff |
| color | tc-l4 | #8cc5ff |
| color | tc-l5 | #a0cfff |
| color | tc-l6 | #b3d8ff |
| color | tc-l7 | #c6e2ff |
| color | tc-l8 | #d9ecff |
| color | tc-l9 | #ecf5ff |
| color | tc-t1 | #303133 |
| color | tc-t2 | #606266 |
| color | tc-t3 | #909399 |
| color | tc-t4 | #C0C4CC |