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>

子级管控

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子级管控》

进阶教程

再举一个粟子:

<table class="us-ml-2em ac us-borderCollapse-collapse us-w,h-50-3 us-bo-[1px_solid_#666]-3 uc-bg-ff0-3 group-tb">  <tr class="nl-[white uc-bg-00f]-even">    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>  </tr></table><div class="us-h-20"></div><table class="tb">  <tr>    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>  </tr></table>

运行成果如下:

具体解释:us-ml-2em,代表table表格右边距2个字符,即{margin-left: 2em;}
ac,代表元素内文字居中,这是《内置款式》,即{text-align: center;}
us-borderCollapse-collapse,代表合并折叠表格边框,这是一个典型的驼峰语法,即{border-collapse: collapse;}
us-w,h-50-3,代表table的所有三代子元素td,宽、高均为50像素,即<td style="width: 50px; height: 50px">。看到这里,有的同学可能会问,明明从table > tr > td,这怎么数都是两层子级,为什么是3不是2呢?What?纳尼?咋了?其实如果获取table元素并且console.log()输入会就发现,在talbe与tr两头会主动生成一个TBODY标签,那么这样算起来,还真应该是三代子元素。或者不同的浏览器,会有不同的解析形式,这些作者没有过多钻研,所以只是简略提一下,遇到这种状况,诸位输入元素看一看就会得出问题症结所在。
us-bo-[1px_solid_#666]-3,代表宽1像素,实线,深灰色边框,即{border: 1px solid #666;}
uc-bg-ff0-3,代表三代子元素td背景为黄色,即{background: #ff0;}
group-tb,指令组合,将此指令之前的所有款式及指令汇合copy,tb是组名,其它元素应用时,间接书写这个组名,即可拉取指令汇合。
tb,拉取group生成的指令汇合。
nl-[white uc-bg-00f]-even,子级管控,前文曾有过介绍,这里在表达式前面加了一个even参数,即表达式只对偶数子级元素失效。表达式里的white为子元素文字红色《内置款式》,uc-bg-00f为子元素背景蓝色,表达式里的分项能够用空格,也能够用下划线“_”符号分隔。Yus框架官网:http://www.runyus.com微信:aiwenci