Простое МЕНЬШЕЕ смешивание и переменная, вызывающие ошибку компиляции

#less

#Меньше

Вопрос:

Я пытаюсь выяснить, почему этот меньший файл не будет компилироваться. Я создал базовое смешивание и переменную, которая анализируется в нем, но по какой-то причине она не компилируется.

Сообщение об ошибке: ошибка синтаксического анализа: нераспознанный ввод

В этой строке: #placement-5-1.sidenav(@sidenav-colour)

Есть ли что-то очевидное, что я пропустил? Я новичок в less и изучаю его для своей новой работы. Спасибо за любую помощь здесь.

 #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;
					amp;: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) }

1. Не уверен на 100%, но #placement-5-1.sidenav(@sidenav-colour) разрешена ли точка? Работает для меня, когда я удаляю точку .sidenav , которая точка

2. я не могу понять, почему нет

3. Это имя микширования, в нем не может быть точки, оно, вероятно, думает, что это класс css, но тогда это объявление микширования, поэтому оно не может его проанализировать

4. я не могу понять, почему нет — в основном параметрическое имя смешивания должно быть одним идентификатором (очевидно, «один объект -> одно имя») Вы можете получить .a.b.c.d.... что-то с помощью вложенности, например, как в пространствах имен.

Ответ №1:

Где вы объявляете свое смешивание? Основываясь на коде, который вы разместили здесь, похоже, что переменная @sidenav-color никогда не объявлялась, поэтому это будет «нераспознанный ввод». Попробуйте использовать эту статью, чтобы проверить, правильно ли вы используете смешивание https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins /

1. Я также подозреваю, что это связано с sidenav-color — но разве мой код еще не объявляет sidenav-color в самой первой строке? (Я не знаком с LESS, но он кажется идентичным примерам, которые я прочитал, например, здесь: codepen.io/anon/pen/zXzGja и ссылка, которую вы предоставили) — и как вы объявляете переменные? спасибо за помощь

2. @sidenav-colour это параметр, который передается в смешивание. Поскольку у него нет значения по умолчанию, это обязательная переменная для смешивания, не имеющая ничего общего с объявлением