YUS框架之us指令

　众所周知的是，页面的样式渲染是由CSS来完成的。例如：width:100px;代表元素宽度为100像素；height:50px;代表元素高度为50像素；font-size:15px;代表元素中字体大小为15像素；下面一段就是标准的CSS语句：

.css1 {
width:100px;
height:100px;
line-height:100px;
background:#ff0;
}

　　上面的CSS代码，代表一个宽、高、行高为100px，并且背景色为黄色的方框元素，那么，用Yus如何来实现上述CSS代码的功能呢，先直接给出例子：

<div class="us-w-100 us-h-100 us-lh-100 uc-bg-ff0"></div>

解释如下：

us-w-100，代表宽度为100像素，即：width:100px;

us-h-100，代表高度为100像素，即：height:100px;

us-lh-100，代表行高为100像素，即：line-height:100px;

us-bg-ff0，代表背景色为#ff0黄色，即：background:#ff0;

由于在Yus中，数值相同的情况下，中间的属性可以用逗号分隔连续书写，所以上边的代码可以精简为：

<div class="us-w,h,lh-100 uc-bg-ff0"></div>

US指令说明

项目	描述
语法	指令由三部分部分，第一部分us声明尺寸指令，第二部分为参数属性缩写，第三部分为数值。 示例：us-属性参数-数值。
属性参数	是CSS属性的缩略写法，如w代表width，m代表margin，详情参见下列《属性参数表》
数值	数值为正数的情况下直接书写，数值为负数的情况下，用ms或^符号来代替。 示例：us-t-ms100或us-t-^100
n	向下延伸层级，例如n为3时，影响第三代子元素，即children().children().children()
单位	数值如果不带单位的情况下，默认使用px像素单位，us指令支持的尺寸单位包括px，pt，em，cm，vw，vh，vmin，vmax等，百分比可以使用%符号或pr

属性参数表

yus将css常用属性简单的划分为两大类，即尺寸、颜色。yus认为所有px，pt，em，cm，vw，vh或者百分比符号%，都是尺寸的计量单位，可以使用us命令进行渲染，下表列出所有尺寸单位涉及到的属性参数：

属性参数	示例	CSS写法	功能描述
w	us-w-500	{width:500px;}	元素宽度，如果作用在<span>或<li>等标签上，需要首先添加block或inline样式，而这些class样式是yus系统自带的《内嵌样式》，直接书写调用即可。 例如： <span class="block us-w-300">或<li class="inline us-w-300">
h	us-h-20vh	{height:20vh;}	元素高度 说明一下vw、vh，vmin，vmax几个尺寸单位，1vw等于视窗宽度的1%，1vh等于视窗高度的1%，vmax视窗宽度或高度相对大的，vmin视窗宽度或高度相对小的。
lh	us-lh-30	{line-height:30px;}	文本行高
fs	us-fs-15	{font-size:15px;}	文字大小
t	us-t-10vh	{top:10vh;}	上方距离，设置顶端距离的元素，必须同时设置position位置属性，使用内嵌class样式自带的poa、por、pof都可以，参考 《内嵌样式》。
r	us-r-10	{right:10px;}	右侧距离，需设置position位置属性。
b	us-b-10	{bottom:10px;}	下方距离，需设置position位置属性。
l	us-l-10	{left:10px;}	左侧距离，需设置position位置属性。
m	us-m-2em	{margin:2em;}	元素外边距，此示例代表元素外边距为2个字符。 CSS中margin属性可以这些书写：{margin:2cm 4cm 3cm 4cm;}或{margin:10px 5px;}。Yus同样也支持这种书写方式，只是在格式上稍有区别，同时对us-，uc-指令不再敏感。 例如： us-m-[2cm 4cm 3cm 4cm]或us-m-[10px 5px]
mt	us-mt-8	{margin-top:8px;}	元素上方外边距。
mr	us-mr-8	{margin-right:8px;}	元素右侧外边距。
mb	us-mb-8	{margin-bottom:8px;}	元素下方外边距。
ml	us-ml-8	{margin-left:8px;}	元素左侧外边距。
p	us-p-8px	{padding:8px;}	元素内边距。
pt	us-pt-8	{padding-top:8px;}	元素上方内边距。
pr	us-pr-8	{padding-right:8px;}	元素右侧内边距。
pb	us-pb-8	{padding-bottom:8px;}	元素下方内边距。
pl	us-pl-8	{padding-left:8px;}	元素左侧内边距。
bw	us-bw-1	{border-width:1px;}	边框宽度，设置元素边框宽度，必须同时设置元素边框的线型，例如：solid或dotted，内置线型class样式参见 《内嵌样式》。
bt	us-bt-1	{border-top-width:1px;}	边框上方宽度。
br	us-br-1	{border-right-width:1px;}	边框右侧宽度。
bb	us-bb-1	{border-bottom-width:1px;}	边框下方宽度。
bl	us-bl-1	{border-left-width:1px;}	边框右侧宽度。
ra	us-ra-5	{border-radius:5px;}	元素边框圆角。
ls	us-ls-5	{letter-spacing:5px;}	元素字母间距。
ti	us-ti-2em	{text-indent:2em;}	段落首行文字缩进，例子中为缩进两个字符。
ws	us-ws-5	{word-spacing:5px;}	文字间距。
ow	us-ow-2	{outline-width:2px;}	元素周围轮廓线的宽度。
oo	us-oo-5	{outline-offset:5px;}	轮廓线偏移量。
xw	us-xw-500	{max-width:500px;}	设置最大宽度。
nw	us-nw-500	{min-width:500px;}	设置最小宽度。
xh	us-xh-500	{max-height:500px;}	设置最大高度。
nh	us-nh-500	{min-height:500px;}	设置最小高度。
va	us-va-5	{vertical-align:5px;}	设置元素的垂直对齐方式，注意此处只可以使用数值，如top、middle等值的写法，下面另外说明。
cp	us-cp-5	{grid-column-gap:5px;}	定义网格布局中，列间隙的大小。
rp	us-rp-5	{grid-row-gap:5px;}	定义网格布局中，行间隙的大小。
gap	us-gap-5	{grid-gap:5px;}	定义网格布局中，行与列间隙的大小。
z	us-z-10	{z-index:10;}	设置元素的堆叠顺序。
fw	us-fw-700	{font-weight:700;}	设置文本的粗细，其中数值700等价于bold。
opa	us-opa-0.5	{opacity:0.5;}	设置元素的不透明级别。
o	us-o-5	{order:5;}	设置弹性盒对象元素的顺序。
g	us-g-3	{flex-grow:3;}	设置或检索弹性盒子的扩展比率。
s	us-s-2	{flex-shrink:2;}	设置flex元素的收缩规则。
fb	us-fb-80	{flex-basis:80px;}	设置弹性项目的初始长度。
f	us-f-1	{flex:1;}	设置或检索弹性盒模型对象的子元素如何分配空间。