Yus框架之nl子级管控指令

Posted 2023-03-14

语法１

.nl-className
.nl-[class1_class2_class3]

实例1

<ul class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]">
  <li>子</li>
  <li>级</li>
  <li>管</li>
  <li>控</li>
</ul>

运行效果1

详细解释1

1、nl-class1 nl-class2，即给子元素添加class1 class2样式。

2、nl-[class1 class2 class3]，需要一次添加多个样式时，可以使用方括号框将它们起来；另外，如果需要us-h-50 uc-c-f00这样的yus样式作用到子级元素，也需要使用方括号框起来。

3、nl-[class1_class2_class3]，上一条中 class2 前后都有空格，这将会被浏览器判断为一个样式，作用在子级的同时，也会对父级产生影响。如果只希望影响子级元素时，可以用下划线来代替空格，即可解决问题。

语法2

.nl-className-dom
.nl-[class1_class2_class3]-dom

实例2

<ul class="test">
  <li>子</li>
  <li>级</li>
  <li>管</li>
  <li>控</li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10 uc-bg-f00]-test !hidden"></i>

运行效果2

详细解释2

1、与实例1的效果相同，但是代码更简洁了一些，由于某些伪道学所提倡的那样，在html页面中不要写太多style css代码，看起来不好看。

2、利用nl-[class1 class2 class3]-dom指令，可以将庞杂的代码统一放在页面最底部，这样就可以在上面看class名称，到下面去找class对应的样式了，更加便于阅读理解；当然了，多数编辑器或脚手架按ctrl键，点击样式名称时，可以直接定位到对应的css文件中去，那样其实也挺方便的。

3、当然，我们也可以利用yus框架的《include指令》，将这些样式包含在另外一个页面中，只是需要注意的是yus的include指令是异步的，所以如果有相关的js代码也要放在include页面中，以免产生错误。

4、代码中的 hidden 是 yus​​《内置样式》​​，前面加一个感叹号，表式强制模式，毕竟这一部分是不希望显示在页面中的，其实可以在页面中放置一个隐藏区域，将所有这些都放在里面。

5、注：include功能已完善，语法是这样审儿滴：<include src="filename.html"></include>，说明文档正在整理当中，后续将放出。

语法3

.nl-className-筛选器
.nl-[class1_class2_class3]-筛选器

实例3

<ul class="test nl-[uc-bg-f00]-odd nl-[uc-bg-00f]-even">
  <li>子</li>
  <li>级</li>
  <li>管</li>
  <li>控</li>
</ul>
<i class="nl-[ac white inline us-w,h,lh-50 us-fs-23 us-mr-10]-test !hidden"></i>

运行效果3

详细解释3

1、解释就不解释了，放一个表格自行体会吧。

NL指令说明

项目	描述
nl	声明子级管制指令
className [样式集]	className：一般情况下，给子级元素添加一个样式名称直接写 className 即可，如果赋多个样式，最好使用方括号 [ ] 框起来。 [样式集]：需要说明的是，方括号 [ ] 中间的样式集，两个样式之间的空格，最好用下划线 “_” 代替；短横线 “-” 在必要的情况下，可以使用竖线“|”代替。因为，我们的目的是给其它元素添加样式，而不是将这些样式作用于自身，如：nl-[b red ac]-tag，由于使用了空格，中间的 red 样式就会对当前元素生效。
dom	可选项 dom为空，样式集直接作用于当前对象的子元素。 dom不为空，dom代表目标对象名称，样式集作用于dom对象的子级。
筛选器	可选项 odd：当前对象奇数子元素。 even：偶数子元素。 number：第一个子元素1，第二个2，以此类推。 3n：每3个元素间隔。 3n+2：从第2个子元素开始，每3个元素间隔。
.clear	在子级元素中添加clear类，可以清除nl-指令的效果。