关于前端:YUS框架之uc颜色控制指令

14次阅读

共计 2071 个字符,预计需要花费 6 分钟才能阅读完成。

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

正文完
 0