按名称从 css LESS 列表中提取项目

2024-04-12

如果我有一个不太像的列表:

@colors: 'red' #f00, 'green' #0f0, 'blue' #00f;

我知道我可以循环列表并获取颜色,但如果我想获取特定的颜色怎么办?说我想做

extract(@colors, 'green')

将 #0f0 从列表中删除。有没有办法做到这一点?如果需要几步而不是 1 步就可以了,我只是好奇这是否可能。该文档仅提到通过索引从列表中获取项目。

http://lesscss.org/functions/#list-functions-extract http://lesscss.org/functions/#list-functions-extract


The Lists https://github.com/seven-phases-max/less-plugin-lists#less-plugin-lists较少的插件有at https://github.com/seven-phases-max/less-plugin-lists/blob/master/docs/ref.md#at函数,所以你的代码可能很简单:

@colors: red #f00, green #0f0, blue #00f;

div {
    color: at(@colors, green); 
}

- - -

原始的“Legacy Less”答案:

没有专门的函数,但是为此编写一个 mixin 不是问题:

@colors:
    'red'   #f00,
    'green' #0f0,
    'blue'  #00f;

usage {
    .by-key(@colors, 'green');
    property: @by-key;
}

// ............................
// impl.

.by-key(@array, @key, @fallback...) {
    .-(length(@array));
    .-(@i) when (@i > 0) {.-((@i - 1))}
    .-(@i) when (@key = extract(extract(@array, @i), 1)) {
        @by-key: extract(extract(@array, @i), 2);
    }

    .--() {@by-key: @fallback} .--;
}

里面发生了什么.by-key mixin?

  • .-是一个 mixinloop http://lesscss.org/features/#loops-feature trough @array找到感兴趣的配对。
  • .-(length(@array));启动第一次迭代(从最后一次迭代开始)@array index)
  • .-(@i) when (@i > 0) ...是迭代混合定义,它简单地调用下一个迭代(直到第一个迭代)@arrayindex) - 因此这两个形成了我们的递归循环。
  • .-(@i) when (@key = ...是另一个迭代定义,它将当前项键与感兴趣的键进行比较,如果它们匹配,则定义@by-key我们将使用的变量回报 http://lesscss.org/features/#mixins-as-functions-feature value.
  • 最后.--() {@by-key: @fallback} .--;是另一个 mixin 的定义和立即调用,它也定义了@by-key如果在之前的循环中没有找到具有指定键的值,则该变量将生效。 (因此,如果您将上面代码片段中的 mixin 称为.by-key(@colors, 'banana', #123);它会返回#123。这个“后备”部分可以被省略,然后如果在数组中找不到键(类似于“变量”),代码将导致错误@by-key没有定义”)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

按名称从 css LESS 列表中提取项目 的相关文章

  • 如何在滚动时保持这些 tagHover 的位置靠近标签并且 tagHover 具有固定位置?

    https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview 下面还有一个 stackoverfl
  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本
  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • 如何在 div 容器内的元素之间留出空间

    我有一个弹性容器 它将由元素动态填充 容器没有固定宽度 I use max width max content 并且可以包含我想要的任意数量的元素 问题是我需要这些元素之间的间距 但不需要元素和容器之间左侧和右侧的间距 当然我可以用 ele
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的
  • 如何使用 javascript 或 jquery 生成 CSS 路径?

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel
  • IE7 显示问题:菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m
  • Symfony2 Assetic 和 Less Sourcemaps

    我不确定如何破解 assetic less 过滤器以输出源映射文件 我这里指的是LessFilterhttps github com kriswallsmith assetic blob master src Assetic Filter
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • Apache OFBiz delegator API 是否支持按限制或偏移量从数据库获取记录列表

    假设我们只需从表中获取 5 条记录 但我的 where 子句匹配数据库中的 25k 条记录 那么有没有办法ofbiz框架只选择 5 条记录 而不是从数据库获取列表 然后从列表中只取出 5 条记录 如果限制不可能 因为ofbizAPI 与数据
  • 修改函数内“按值传递”的参数并将它们用作局部变量

    我见过一些代码 其中按值传递给函数的参数被修改或分配了新值 并且像局部变量一样使用 这是一件好事吗 这样做有什么陷阱吗 或者这样编码可以吗 本质上 函数的参数是一个局部变量 所以这种做法原则上还不错 另一方面 这样做可能会导致维护麻烦 如果
  • 如何编写一个可以读取 doc/docx 文件并将其转换为 txt 的 python 脚本?

    基本上我有一个包含大量 doc docx 文件的文件夹 我需要 txt 格式的文件 该脚本应该迭代目录中的所有文件 将它们转换为 txt 文件并将它们存储在另一个文件夹中 我该怎么做 是否存在可以执行此操作的模块 我认为这将是一个有趣的快速
  • 将 JSON 转换为 PowerShell 对象并将 PowerShell 转换回 JSON

    我将 JSON 从 Azure 资源组导出到 JSON 文件 如下所示 Export AzureRmResourceGroup ResourceGroupName SourceResourceGroupName Path filename
  • cocoa WebView中innerhtml和outerhtml的区别

    我在我的应用程序中使用 cocoa webview 进行富文本编辑 只是与 webkit 中提供的innerHtml 和outerHtml 方法混淆了 谁能解释一下有什么区别 DOMHTMLElement webView mainFrame
  • 为什么优秀的 UI 设计对于一些开发人员来说如此困难? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Java 两个独立键盘的独立输入

    我有两个 USB 键盘插入同一台机器 我正在开发一个 Java 应用程序 是否有办法允许 Java 应用程序分离出它来自哪个 USB 键盘 即是否有类似的东西http docs oracle com javase 6 docs api ja
  • ajax提交表单为什么不能回显$_POST

    我正在使用ajax提交表单进行测试 提交给我自己的页面 new1 php 我想要的是 单击提交按钮后 它将回显名字和姓氏 但我不知道为什么提交后看不到名字和姓氏 这是new1 php页面
  • Zend Framework 2 - 如何包含库中的部分内容

    我写了一个部分 我想在几个模块中使用它 我认为最好的方法是将其放入我的自定义库中 但不幸的是 我无法找到一种方法来包含这个部分 而不使用像这样的非常难看的路径 echo this gt partial vendor myvendor lib
  • HTML5同页导航

    我在 html5 中遇到导航问题 我看了很多教程 我不知道我做错了什么 我想在同一页面上导航
  • Dropbox 是一个有效的快速但肮脏的源代码控制解决方案吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • ADB 错误:无法连接到守护程序

    我需要帮助才能让 ADB 在我的 PC win7 64 位 和 Samsung Galaxy S2 上运行 我已经安装了 Kies 附带的驱动程序 我想是在子文件夹 25 escape 下 驱动程序在设备管理器下正确显示为 Samsung
  • Laravel - 如何注册自定义广播者

    我想使用 BroadcastManager 注册自定义广播器 而无需更改内部框架代码 现在我必须在Illuminate Broadcasting BroadcasterManager class protected function cre
  • R:如何使 dump.frames() 包含所有变量,以便稍后使用 debugger() 进行事后调试

    我有以下代码 它会引发错误并使用以下命令写入所有帧的转储dump frames as 提议 e G 通过哈德利 威克姆 http adv r had co nz Exceptions Debugging html a lt 1 b lt H
  • Ruby 比较运算符? == 与 === [重复]

    这个问题在这里已经有答案了 和 有什么区别 什么时候应该使用哪一个 两者都只是在对象上调用的方法 这意味着对象决定哪个意味着什么 然而 Ruby 中有一些关于它们之间差异的约定 通常 比 a b几乎总是为真 如果a b是 阅读此内容的最佳位
  • 如何在 MVC 4 中使用 jQuery 更新 List

    我目前正在尝试使用修改后的索引视图创建设置页面 目标是让用户获得所有设置显示并可以更改一个视图中的所有设置并保存所有设置只需一个按钮 应使用 Ajax 更新设置 我目前的做法 View
  • 如何在 Mockito 中模拟 scala 调用名称

    我试图在mockito 中模拟scala 按名称调用方法 但遇到这个错误 如果匹配器与原始值组合 则可能会出现此异常 不正确 someMethod anyObject 原始字符串 使用匹配器时 所有参数都必须由匹配器提供 例如 正确的 so
  • 为什么迭代器使用“!=”而不是“<”?

    我习惯这样写循环 for std size t index 0 index lt foo size index Do stuff with foo index 但是当我在其他人的代码中看到迭代器循环时 它们看起来像这样 for Foo It
  • Visual Studio 调试器:输入外部函数时中断?

    With 只是我的代码 http msdn microsoft com en us library h5e30exc aspx 关闭并且源位置 服务器 很容易进入代码中没有的函数 但是有没有办法在其中一个函数上设置断点 基本上 我想说 当从
  • 按名称从 css LESS 列表中提取项目

    如果我有一个不太像的列表 colors red f00 green 0f0 blue 00f 我知道我可以循环列表并获取颜色 但如果我想获取特定的颜色怎么办 说我想做 extract colors green 将 0f0 从列表中删除 有没