栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用LESS构建选择器列表

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用LESS构建选择器列表

如前所述,您的尝试几乎就在那里,由于可见性规则可变,因此无法正常工作。请注意,每次

.selector-list
迭代都定义了新
@selector-list
变量,该变量在当前作用域中具有更高的优先级,但不会覆盖
@selector-list
外部作用域(即先前
.selector-list
迭代及
以上 迭代的作用域)中的变量。因此,当您
@selector-list
在首次
.selector-list
调用后使用时,您将获得“最高”
.selector-list
迭代中设置的值 (即第一个带有的值
@i = 1
)。

“重返”从递归循环的最后一次迭代的值,你需要使用此值定义一个变量 内的最后一次迭代。通常,最简单的方法是提供“终端”
mixin(即,递归mixin的最后一次调用的特殊化)。实际上,无论如何,您都将需要这样的终端来处理列表的最终逗号。例如:

#1

.selector-list(@parent, @children, @i: 1, @list: "") when (@i < length(@children)) {    @child: extract(@children, @i);    .selector-list(@parent, @children, (@i + 1), "@{list} @{parent} @{child},");}.selector-list(@parent, @children, @i, @list) when (@i = length(@children)) {    @child: extract(@children, @i);    @selector-list: e("@{list} @{parent} @{child}");}// usage:@text-elements: p, ul, ol, table;.selector-list("body.single .entry-content", @text-elements);@{selector-list} {    line-height: 1.8;}

--

#2 与上述相同,只是稍微“优化”:

.selector-list(@parent, @children, @i: length(@children), @list...) when (@i > 1) {    .selector-list(@parent, @children, (@i - 1),        e(", @{parent}") extract(@children, @i) @list);}.selector-list(@parent, @children, 1, @list) {    @selector-list: e(@parent) extract(@children, 1) @list;}// usage:@text-elements: p, ul, ol, table;.selector-list("body.single .entry-content", @text-elements);@{selector-list} {    line-height: 1.9;}

--

#3
一般而言,在Less上下文中,“基于字符串的选择器操作”并不总是一个好主意。主要的问题是少不把这样的字符串为“原生”选择和最先进的减配也不会与他们合作(如少也不会承认

,
&
和类似的元素有那么这样的规则不能嵌套,
extend
也无法看到此类选择器等。)。另一种“较少友好”的方法是将这样的列表定义为混合而不是变量,例如:

.text-elements(@-) {p, ul, ol, table {@-();}}body.single .entry-content {     .text-elements({        line-height: 1.8;    });}

和(当您还需要重用时

body.single .entry-content /.text-elements/
):

.text-elements(@-) {    p, ul, ol, table         {@-();}}.selector-list(@-) {    body.single .entry-content {        .text-elements(@-);    }}.selector-list({    line-height: 1.9;});

等等

--

PS另外,更笼统地说,请不要错过更少的媒体查询,可以将其放入选择器规则集中,因此,根据用例,编写一次选择器列表并设置依赖于媒体的样式通常也更容易在内部(例如,与标准CSS方法相反,您必须为每个媒体查询重复相同的选择器)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465102.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号