按名称从 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 列表中提取项目 的相关文章

  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 如何将模糊屏幕设置为整页并在点击页面时转到顶部

    CSS1 有效 parentDisable z index 2000 width 100 height 100 display none position absolute left 0 background url images btra
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • TYPO3 显示子页面的内容,包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS
  • SaSS 循环使用

    我想创建类 将特定边距应用于我的块 例如 standard margin top margin top 10px standard margin bottom margin bottom 10px small margin top larg
  • 手机上猫头鹰轮播的高度

    我有一个使用 Owl Carousel 覆盖桌面上整个屏幕的图像 当我在手机设备上查看相同的图像时 它仅占用屏幕尺寸的三分之一 我如何调整高度 使其比手机上当前的高度更高 我读过一些帖子 但作为猫头鹰旋转木马的新手 我不确定我是否做错了什么
  • 横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

    我已经用谷歌搜索了这个 但无法弄清楚 谢谢你的帮助 Studiolynch com 响应式和流体布局 在 iphone 5 Safari 中完美运行 除了从横向模式旋转到纵向模式会使字体大小小于应有的大小 但是 如果您最初以纵向模式加载页面
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图

    我正在尝试 Twitter bootstrap 3 我对 HTML CSS 和 Javascript 还很陌生 我有一个我创建的轮播 它的代码如下所示 div class container div class carousel slide
  • (CSS) 倾斜 img 框架而不扭曲图像

    我正在制作一个包含许多倾斜元素的网站 如下所示 这还不错 CSS 转换可能会扭曲它 但是这个怎么样 图像没有扭曲 只是框架以倾斜的方式裁剪 最简单 最好的方法是什么 I think this http codepen io antiblan
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • CSS :hover 影响所有子 div

    我里面有一个父 div 和多个子 div 我希望这样 如果您将鼠标悬停在父 div 上 它会以不同的方式影响所有子 div 的悬停状态 即 一个 div 的文本带有下划线 另一个 div 的文本会更改颜色 并且保存图像的 div 使图像稍微
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set
  • 文本溢出:省略号显示不同的字符

    我这里遇到了一些 CSS 问题 看这张图片 https www flickr com photos 125543025 N07 saved 1 在此图像中 我为文本 INTENSE TRAINING 添加了 CSS 样式 sample st

随机推荐

  • 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 从列表中删除 有没