YUS框架之uc颜色控制指令

Posted 2023-03-08

yus将css常用属性简单的划分为两大类，即尺寸、颜色。yus认为所有px，pt，em，cm，vw，vh或者百分比符号%，都是尺寸的计量单位，可以使用us命令进行渲染；而#f00 ， #ff00 , rgb(255,0,0) , rgba(255,0,0,1)这一类的色彩的渲染，则由uc命令来完成。

例如：

<div class="solid uc-c-f00 uc-bdc-f00 us-bw-1">红色边框</div>

解析如下：

solid　是系统内置css样式，边框线型为实线。

uc-c-f00　字体颜色为红色

uc-bdc-f00　边框颜色为红色

us-bw-1　边框宽度为 1px 像素

同理，因为字体颜色与边框颜色相同，上面的代码可以简写为如下格式：

<div class="solid uc-c,bdc-f00 us-bw-1">红色边框</div>

UC指令说明

项目	描述
语法	指令由三部分部分，第一部分uc声明颜色指令，第二部分为参数属性缩写，第三部分为rgb颜色。 示例：uc-属性参数-f00。
属性参数	是CSS属性的缩略写法，如c代表color，bg代表background，详情参见下列《属性参数表》
rgb	颜色代码格式：FF0000，或f00，或者rgb(255,0,0)，也可以是rgba(255,0,0,0.5)。 示例：uc-c-ff0或us-c-rgba(0,0,0,0.3)
n	向下延伸层级，例如n为3时，影响第三代子元素，即children().children().children()

属性参数表

属性参数	示例	CSS写法	功能描述
c	uc-c-f00	color:#f00;	文本颜色，可以用16进制编码值，例如ff0000，或者f00，这两者是等价的。另外也可以用rgb颜色数值，或者rgba设置透明度，rgb需要使用方括号[]框起来。 例如： <span class="uc-c-f00">红色文本</span> <span class="uc-c-[rgba(255,0,0,0.3)]">红色文本</span>
oc	uc-oc-f00	outline-color:#f00;	边框轮廓颜色。 例如： <span class="sol us-ow-1 uc-oc-f00">红色轮廓</span> 说明：sol是​​《内置样式》​​表示outline-style:solid;，us-ow-1代表轮廓线宽度为1像素。
bg	uc-bg-f00	background:#f00;	背景颜色。 例如： <span class="uc-bg-f00">红色背景</span>
bdc	uc-bdc-f00	border-color:#f00;	边框颜色。 例如： <span class="uc-bdc-f00">红色边框</span>
btc	uc-btc-f00	border-top-color:#f00;	边框上方颜色。 例如： <span class="uc-btc-f00">边框上方红色</span>
brc	uc-brc-f00	border-right-color:#f00;	边框右侧颜色。 例如： <span class="uc-brc-f00">边框右侧红色</span>
bbc	uc-bbc-f00	border-bottom-color:#f00;	边框下方颜色。 例如： <span class="uc-bbc-f00">边框下方红色</span>
blc	uc-blc-f00	border-left-color:#f00;	边框左侧颜色。 例如： <span class="uc-blc-f00">边框左侧红色</span>

子级管控

yus作者本身是一个懒人，所以yus框架尽最大可能去做到简便，那么父元素控制子元素，这项功能就不得不提上日程，指令说明语法中的n，即子元素后代层级数，例如n=1的情况下，表示子级；n=2表示孙级；n=3表示重孙级。

举例说明：

<ul class="us-ml-2em us-w,h-50-1 us-mr-10-1 uc-bg-f00-1 nl-[block_fl]">
  <li></li>
  <li></li>
  <li></li>
</ul>

详细解释：

us-ml-2em，代表ul元素左边距2个字符，即margin-left: 2em;

us-w,h-50-1，代表ul的所有子元素li，宽、高均为50像素，即<li style="width: 50px; height: 50px">

us-mr-10-1，代表ul的所有子元素li，右边距10像素，即<li style="margin-right: 10px">

uc-bg-f00-1，代表ul的所有子元素li，背景颜色红，即<li style="background: #f00">，uc指令参见《uc颜色指令》

nl-[block_fl]，给子元素添加block、fl两个class样式，即<li class="block fl">，nl指令参见​​《nl子级管控》​​