@meizhou/atomcss

Appearance

颜色 ​

class名
样式值
c-#123
color:#123;
c-#1
color:#111111;
c-#12
color:#121212;
c-#123456
color:#123456;
c-#1111111
匹配不到 不会生成样式
c-#
匹配不到 不会生成样式
c-#d23
color:#d23;
c-#d2
color:#d2d2d2;
c-#d
color:#dddddd;
c-#0
color:#000000;
c-red
color:red;
c-red1
匹配不到 不会生成样式
c-cur
color:currentcolor;
c-initial
color:initial;
bg-#1
background-color:#111111;
bg-#d2
background-color:#d2d2d2;
bg-#d23
background-color:#d23;
bg-#d
background-color:#dddddd;
bg-red
background-color:red;
bg-red1
匹配不到 不会生成样式
rgba-1-2-3-4
color:rgba(1,2,3,.4);
rgba-1-2-3-0.6
color:rgba(1,2,3,0.6);
rgba-1-2-3-.6
color:rgba(1,2,3,.6);
gba-10-222-256
color:gba(10%,222%,256%);

使用示例 ​

c-red 红色
c-#9
c-#8710fd
rgba-255-0-0-.6
html
<div class="c-red">c-red</div>
<div class="c-#9">c-#9</div>
<div class="c-#8710fd">c-#8710fd</div>
<div class="rgba-255-0-0-.6">rgba-255-0-0-.6</div>
<div class="c-red">c-red</div>
<div class="c-#9">c-#9</div>
<div class="c-#8710fd">c-#8710fd</div>
<div class="rgba-255-0-0-.6">rgba-255-0-0-.6</div>