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

3次阅读

共计 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

正文完