时间戳

首页 > 解决方案 > 简单的 LESS mixin 和变量导致编译错误

less - 简单的 LESS mixin 和变量导致编译错误

问题描述

我试图找出为什么这个 LESS 文件不会编译。我创建了一个基本的 mixin 并将变量解析到其中，但由于某种原因它不会编译。

错误消息是： ParseError: Unrecognized input

在这条线上：#placement-5-1.sidenav(@sidenav-colour)

有什么明显的我错过了吗？我是新手，正在为我的新工作学习它。感谢您在这里的任何帮助。

#placement-5-1.sidenav(@sidenav-colour) {
	.content-wrapper-inner {
		ol.output-level-1 {
			box-shadow: 0 0 4px rgba(0,0,0,.3);
			> li {
				> a {
					background: @sidenav-colour;
					color: @bright-white;
					padding: 15px 10px;
					position: relative;
					padding-right: 40px;
					&:after {
						position: absolute;
						right: 10px;
						content: "\f063";
						font-family: 'Font Awesome 5 Pro';
						font-size: 2em;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
	@media @mobile {
		margin: 0px 9% !important;
	}
}

@some-red: #e74c3c;
@some-blue: #3498db;

.sidenav.red { #placement-5-1.sidenav.red(@some-red) }
.sidenav.blue { #placement-5-1.sidenav.red(@some-blue) }

标签： less

解决方案

你在哪里声明你的mixin？根据您在此处发布的代码，看起来变量 @sidenav-colour 从未声明过，因此它将是“无法识别的输入”。尝试使用本文检查您是否正确使用了 mixin https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

推荐阅读