Skip to content

Commit b696092

Browse files
wujr5wujr5
committed
支持色值类原子类
1 parent 4b75609 commit b696092

File tree

4 files changed

+113
-59
lines changed

4 files changed

+113
-59
lines changed

‎README.md

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,14 @@ module.exports = {
6666
mode: 'px',
6767
config: {
6868
// 数值原子类配置示例
69-
'.fsize': 'font-size: $px;',
70-
'.bd': 'border: $px solid #e1e5ee;',
69+
'.fsize': 'font-size: $rpx',
70+
'.bd': 'border: $rpx solid #e1e5ee',
7171

7272
// 通用原子类配置示例
73-
'.bg-red': 'background: red;',
73+
'.bgred': 'background: red',
74+
75+
// 色值类原子类配置示例
76+
'.backcolor': 'background-color: #'
7477

7578
// ... 你的配置
7679
}
@@ -84,6 +87,12 @@ module.exports = {
8487
* 如：`.fsize: font-size: $px;`，`.fsize-100`，会生成css：`.fsize-100{font-size: 100px}`
8588
* 根据 mode 来修改单位
8689

90+
**色值原子类定制**
91+
92+
* 包含 `#` 符号，此符号代表属性值中的色值，只支持十六进制表示的 rgb 色值，`vue-atomcss-loader` 会将此替换成类名内的色值
93+
* 使用形式为：`.backcolor-aa33dd`，色值与主体用 `-` 隔开
94+
* 如：`.backcolor': 'background-color: #;`，`.backcolor-aa33dd`，会生成 css：`.backcolor-aa33dd{background-color: #aa33dd}`
95+
8796
**通用原子类定制**
8897

8998
* 不包含 `$` 符号，使用时类名直接使用，不可包含数字
@@ -253,6 +262,27 @@ div.lh-100.fs-40.fw-600
253262
.fw-600{font-weight: 600}
254263
```
255264

265+
## 色值值原子类
266+
267+
### color、background-color
268+
269+
例子：
270+
271+
```html
272+
<!-- wxml -->
273+
<html class="c-123a6d bgc-00ff00"></html>
274+
```
275+
276+
```pug
277+
<!-- pug -->
278+
.c-123a6d.bgc-00ff00
279+
```
280+
281+
```css
282+
.c-123a6d{color: #123a6d}
283+
.bgc-00ff00{background-color: #00ff00}
284+
```
285+
256286
## 通用原子类
257287

258288
> 属性值不具有数字的原子类，使用时需要引入：`vue-atomcss-loader/atomcss-commom.scss`

‎atomcss-loader.js

Lines changed: 69 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -15,63 +15,66 @@ const fs = require('fs');
1515

1616
let oClassNameMap = {
1717
// margin
18-
'.m': 'margin:$px;',
19-
'.ml': 'margin-left:$px;',
20-
'.mr': 'margin-right:$px;',
21-
'.mt': 'margin-top:$px;',
22-
'.mb': 'margin-bottom:$px;',
23-
'.mx': 'margin-left:$px;margin-right:$px;',
24-
'.my': 'margin-top:$px;margin-bottom:$px;',
18+
'.m': 'margin:$px',
19+
'.ml': 'margin-left:$px',
20+
'.mr': 'margin-right:$px',
21+
'.mt': 'margin-top:$px',
22+
'.mb': 'margin-bottom:$px',
23+
'.mx': 'margin-left:$px;margin-right:$px',
24+
'.my': 'margin-top:$px;margin-bottom:$px',
2525
// margin !important
26-
'.mi': 'margin:$px !important;',
27-
'.mli': 'margin-left:$px !important;',
28-
'.mri': 'margin-right:$px !important;',
29-
'.mti': 'margin-top:$px !important;',
30-
'.mbi': 'margin-bottom:$px !important;',
31-
'.mxi': 'margin-left:$px !important;margin-right:$px !important;',
32-
'.myi': 'margin-top:$px !important;margin-bottom:$px !important;',
26+
'.mi': 'margin:$px !important',
27+
'.mli': 'margin-left:$px !important',
28+
'.mri': 'margin-right:$px !important',
29+
'.mti': 'margin-top:$px !important',
30+
'.mbi': 'margin-bottom:$px !important',
31+
'.mxi': 'margin-left:$px !important;margin-right:$px !important',
32+
'.myi': 'margin-top:$px !important;margin-bottom:$px !important',
3333
// padding
34-
'.p': 'padding:$px;',
35-
'.pl': 'padding-left:$px;',
36-
'.pr': 'padding-right:$px;',
37-
'.pt': 'padding-top:$px;',
38-
'.pb': 'padding-bottom:$px;',
39-
'.px': 'padding-left:$px;padding-right:$px;',
40-
'.py': 'padding-top:$px;padding-bottom:$px;',
34+
'.p': 'padding:$px',
35+
'.pl': 'padding-left:$px',
36+
'.pr': 'padding-right:$px',
37+
'.pt': 'padding-top:$px',
38+
'.pb': 'padding-bottom:$px',
39+
'.px': 'padding-left:$px;padding-right:$px',
40+
'.py': 'padding-top:$px;padding-bottom:$px',
4141
// padding !important
42-
'.pi': 'padding:$px !important;',
43-
'.pli': 'padding-left:$px !important;',
44-
'.pri': 'padding-right:$px !important;',
45-
'.pti': 'padding-top:$px !important;',
46-
'.pbi': 'padding-bottom:$px !important;',
47-
'.pxi': 'padding-left:$px !important;padding-right:$px !important;',
48-
'.pyi': 'padding-top:$px !important;padding-bottom:$px !important;',
42+
'.pi': 'padding:$px !important',
43+
'.pli': 'padding-left:$px !important',
44+
'.pri': 'padding-right:$px !important',
45+
'.pti': 'padding-top:$px !important',
46+
'.pbi': 'padding-bottom:$px !important',
47+
'.pxi': 'padding-left:$px !important;padding-right:$px !important',
48+
'.pyi': 'padding-top:$px !important;padding-bottom:$px !important',
4949
// width
50-
'.w': 'width:$px;',
51-
'.wi': 'width:$px !important;',
52-
'.mw': 'min-width:$px;',
53-
'.wp': 'width:$%;',
54-
'.wpi': 'width:$% !important;',
50+
'.w': 'width:$px',
51+
'.wi': 'width:$px !important',
52+
'.mw': 'min-width:$px',
53+
'.wp': 'width:$%',
54+
'.wpi': 'width:$% !important',
5555
// height
56-
'.h': 'height:$px;',
57-
'.hi': 'height:$px !important;',
58-
'.mh': 'min-height:$px;',
59-
'.hp': 'height:$%;',
60-
'.hpi': 'height:$% !important;',
56+
'.h': 'height:$px',
57+
'.hi': 'height:$px !important',
58+
'.mh': 'min-height:$px',
59+
'.hp': 'height:$%',
60+
'.hpi': 'height:$% !important',
6161
// 四方向
62-
'.l': 'left:$px;',
63-
'.r': 'right:$px;',
64-
'.t': 'top:$px;',
65-
'.b': 'bottom:$px;',
62+
'.l': 'left:$px',
63+
'.r': 'right:$px',
64+
'.t': 'top:$px',
65+
'.b': 'bottom:$px',
6666
// 行高
67-
'.lh': 'line-height:$px;',
67+
'.lh': 'line-height:$px',
6868
// 字体
69-
'.fs': 'font-size:$px;',
70-
'.fw': 'font-weight:$;',
69+
'.fs': 'font-size:$px',
70+
'.fw': 'font-weight:$',
7171
// background
72-
'.bgs': 'background-size:$px;',
72+
'.bgs': 'background-size:$px',
7373
// border
74-
'.br': 'border-radius:$px;'
74+
'.br': 'border-radius:$px',
75+
// 颜色
76+
'.c': 'color: #',
77+
'.bgc': 'background-color: #',
7578
};
7679

7780
let oAtomConfig = {}
@@ -100,6 +103,10 @@ for (let key in oClassNameMap) {
100103
// 数值原子类的正则
101104
if (value.indexOf('$') != -1) {
102105
sAtomRegExp += `\\${key}-[0-9]+|`;
106+
}
107+
// 色值原子类正则
108+
else if (value.indexOf('#') != -1) {
109+
sAtomRegExp += `\\${key}-[0-9a-fA-F]+|`;
103110
// 通用原子类的正则
104111
} else {
105112
sAtomRegExp += `\\${key}|`
@@ -158,8 +165,16 @@ module.exports = function(sSource) {
158165
aClassName.forEach(item => {
159166
let sKey;
160167

161-
if (/\d+/.test(item)) {
168+
let bColorFlag = oClassNameMap[item.split('-')[0]] && oClassNameMap[item.split('-')[0]].indexOf('#') != -1;
169+
170+
// 色值类
171+
if (bColorFlag) {
172+
sKey = item.match(/\.\w+/)[0];
173+
}
174+
// 数值类
175+
else if (/\d+/.test(item)) {
162176
sKey = item.match(/\.\w+/)[0];
177+
// 通用类
163178
} else {
164179
sKey = item;
165180
}
@@ -170,10 +185,14 @@ module.exports = function(sSource) {
170185
if (['.wp', '.hp', '.fw'].includes(sKey)) {
171186
nValue = item.match(/\d+/)[0];
172187
} else {
173-
/\d+/.test(item) && (nValue = +item.match(/\d+/)[0]);
188+
if (bColorFlag) {
189+
nValue = '#' + item.split('-')[1]
190+
} else {
191+
/\d+/.test(item) && (nValue = +item.match(/\d+/)[0]);
192+
}
174193
}
175194

176-
aStyleStr.push(`${item}{${oClassNameMap[sKey].replace(/\$/g, nValue)}}`);
195+
aStyleStr.push(`${item}{${oClassNameMap[sKey].replace(/\$|\#/g, nValue)}}`);
177196
});
178197

179198
// 输出 debug 数据

‎atomcss.config.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
module.exports = {
22
mode: 'px', // px：单位是 px，rem：单位是 rem，默认是 px
33
config: {
4-
// 数值原子类定制
5-
'.fsize': 'font-size: $px;',
6-
'.bd': 'border: $px solid #e1e5ee;',
4+
// 数值原子类配置示例
5+
'.fsize': 'font-size: $rpx',
6+
'.bd': 'border: $rpx solid #e1e5ee',
77

8-
// 通用原子类定制
9-
'.bg-red': 'background: red;',
8+
// 通用原子类配置示例
9+
'.bgred': 'background: red',
10+
11+
// 色值类原子类配置示例
12+
'.backcolor': 'background-color: #'
13+
14+
// ... 你的配置
1015
}
1116
}

‎test/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="pug">
22
div
3-
h1.fs-150.h-150.lh-150.bg-red test
3+
h1.fs-150.h-150.lh-150.bgc-00ff00.backcolor-00ff00.c-ff00ff.c-123a6d.c-ssdfsdf test
44
HelloWorld
55
include components/test.pug
66
</template>

0 commit comments

Comments
 (0)