微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

嵌套调用less函数时遇到的问题分享

零下一度
发布： 2017-06-24 11:55:04
原创
1779人浏览过

在a.less中导入base.less
a.less中的代码

.animate-ripple-ink{.animation(ripple .5s linear;{
100%{
opacity: 0;.transform(scale(2.5));}});
}
登录后复制

base.less中的代码

.animation(@value;@content){-webkit-animation: @value;-moz-animation: @value;-o-animation: @value;-ms-animation: @value;animation: @value;.keyframes(~`"@{value}".split(/,\s+/)[0].replace("[","")`,@content);
}
登录后复制

@value的值为[ripple, .5s, linear]
"@{value}"成为字符串"[ripple,  .5s, linear]",避免js解析错误。
~避免编译，不加则输出为"ripple"
Tips:

.animate-ripple-ink{.animation(ripple .5s linear;{
100%{
opacity: 0;.transform(scale(2.5));}});
登录后复制

 

Text Mark
Text Mark

处理文本内容的AI助手

Text Mark 81
查看详情 Text Mark

少一个},less竟然不报错，而是调用一个参数的.animation ！我觉的这是一个bug。

以上就是嵌套调用less函数时遇到的问题分享的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：分享一篇html入门的实例代码 下一篇：总结学习HTML需要哪些知识点？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
HTML内容区域怎么语义化_HTML主要内容区域的语义化标签使用方法 使用main标签定义页面核心内容，配合article、section、header、footer和aside等语义化标签合理划分结构，提升可访问性与SEO。
2025-11-20 19:57:06
696
HTML表单数据怎么处理_JavaScript处理表单数据的常用方法 首先获取表单数据并验证，再通过事件监听和FormData提交；具体包括：1.用getElementById、elements或querySelector获取字段值；2.监听submit事件并preventDefault阻止默认提交；3.使用FormData收集数据并配合fetch发送；4.提交前进行必填项和格式验证，提供用户反馈；掌握这些可高效安全地处理各类表单。
2025-11-20 19:53:23
702
HTML表单required怎么设置_HTML表单必填项required属性的使用方法 required属性用于设置表单字段为必填项，浏览器自动验证非空后才允许提交。支持该属性的元素包括文本框、密码框、邮箱、数字输入、下拉框（默认选项为空）和文本域。示例中注册表单的姓名、邮箱、密码、性别和简介均设为必填，用户未填写时浏览器会提示并聚焦首个错误字段。注意事项：前端验证需配合服务器端校验；hidden类型不适用；radio按钮通过name分组实现单选必填，checkbox单独设置表示必须勾选；IE9及以下不支持，需JS辅助验证。合理使用可提升表单填写规范性与效率。
2025-11-20 19:39:05
847
HTMLsection语义化怎么用_HTMLsection标签的正确使用场景与语义规范 语义化是使用HTML标签表达内容真实含义，如section表示有主题的独立区块，需含标题，用于文章章节等逻辑分节，提升可读性、SEO和可访问性，区别于仅作布局的div。
2025-11-20 19:25:02
185
HTML语义化对SEO有什么好处_HTML语义化提升搜索引擎排名的原理 HTML语义化通过使用具有明确含义的标签来组织网页内容，帮助搜索引擎更好地理解页面结构和信息重点。这直接影响了网页在搜索结果中的表现。提升内容可读性与结构清晰度搜索引擎爬虫依赖代码结构判断页面主题。使用、、、、等语义化标签，能让爬虫快速识别导航、主体内容、侧边栏和页脚等区域。到标签合理嵌套，体现内容层级，突出关键词重点、等标签提供上下文信息，增强内容可信度避免全部使用导致结构模糊，降低抓取效率增强关键词相关性与上下文理解语义标签本身携带含义，能辅助搜索引擎判断关键词所处环境。例如，出现在中的文字
2025-11-20 19:23:02
897
HTML表单无障碍怎么优化_HTML表单无障碍访问的优化方法与aria标签使用 正确使用语义化标签和ARIA属性是HTML表单无障碍优化的核心，首先应通过label、fieldset、legend等标签建立清晰结构，确保屏幕阅读器可识别输入项含义与分组关系；其次利用aria-label、aria-describedby等补充描述信息，增强复杂控件的可访问性；同时保证键盘导航流畅，支持标准操作，并在验证错误时及时反馈并聚焦首个错误字段；最后通过role="alert"或aria-live实现动态消息播报，结合实际工具测试确保所有用户均可顺利操作表单。
2025-11-20 19:16:53
596
HTML表单pattern属性怎么用_HTML输入格式验证pattern属性的正则表达式设置 HTML表单中pattern属性用于验证输入格式，支持text、email、password等类型，通过正则表达式约束输入内容，如限制数字、手机号、用户名、密码等格式，需配合title提示用户，且仅作前端校验，后端仍需验证。
2025-11-20 18:01:02
685
HTML表单autofocus属性怎么设置_HTML表单元素自动聚焦autofocus属性的使用 autofocus属性用于页面加载时使表单元素自动获得焦点，提升用户体验；2.它是布尔属性，无需赋值，可应用于input、textarea、button和select元素；3.示例中搜索框添加autofocus后光标自动定位，用户可直接输入；4.注意事项包括避免多个元素使用、谨慎在移动设备使用以防键盘干扰、防止打断用户操作；5.该功能简单实用，优化表单交互。
2025-11-20 17:49:02
484
HTML导航栏怎么语义化布局_HTML导航栏的语义化标签选择与布局技巧 使用nav标签定义导航区域，内部用ul和li组织链接，添加aria-current指示当前页，结合aria-haspopup和aria-expanded处理下拉菜单，提升可访问性与SEO。
2025-11-20 17:22:02
292
HTML列表布局怎么语义化_HTMLulol与dl标签的语义化布局方法 正确使用ul、ol、dl标签能提升HTML语义化：ul用于无序项目如导航菜单；ol用于有序内容如操作步骤；dl用于术语与描述配对如商品参数，增强可读性与无障碍访问。
2025-11-20 17:10:02
626
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部