Задать вопрос
valikhan
@valikhan
web-designer, developer
css

Как профиксить ошибку при компиляции стилей less?

Делал уроки по использованию less. 

<!doctype html>

<html lang="en">

	<head>
			<meta charset="utf-8">
			<title> test </title> 
			<link rel="stylesheet/less" href="main.less">
			<script src="less.min.js"></script>
	</head>

	<body>
		<div id="container">
			<div id="nav">
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#">Скачать</a></li>
					<li><a href="#">Документация</a></li>
					<li><a href="#">О нас</a></li>
					<li><a href="#">Контакты</a></li>
					 
				</ul>
			</div>
		</div>
	</body>
	</html>


/*Global Variables*/

@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f4f4f4;


div#nav {
		ul{
			li{
				list-style: none;
				a {
					text-decoration: none;
					font-family: verdana;
					font-size: 14px;
					color: #textColor;
					float: left;
					padding: 15px 30px;
					border-right: 1px solid fadeout(@textColor, 60%);
					.gradient(@mainColor2, @mainColor);
					&:hover {
						.gradient (@mainColor, @mainColor2);
						}
					}
			}
		}
}


.gradient (@col, @col2) {
	background-color: @col;
	background-image: -webkit-gradient(linear, left top, left bottom, from (@col), to (@col2));
	background-image: -webkit-linear-gradient(top, @col, @col2);
	background-image: -moz-linear-gradient(top, @col, @col2);
	background-image: -ms-linear-gradient(top, @col, @col2);
	background-image: -0-linear-gradient(top, @col, @col2);
	background-image: linear-gradient(top, @col, @col2);
	filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='@col', EndColorStr='@col2')";
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='@col', EndColorStr='@col2')";
	}


Выдало ошибку -

SyntaxError: c.unit is undefined

in main.less on line 20, column 6:
19 border-right: 1px solid fadeout(@textColor, 60%);
20 .gradient(@mainColor2, @mainColor);
21 &:hover {
Stack Trace
[70][58][80][73][75][67][66][75][75][75][75][75][43][33][40][34]i/<.parse/w@file:///C:/Users/777/Desktop/less/less.min.js:14:13532
[85][84][85]i/<.parse@file:///C:/Users/777/Desktop/less/less.min.js:14:13581
[34][40]j@file:///C:/Users/777/Desktop/less/less.min.js:13:9256
j/<@file:///C:/Users/777/Desktop/less/less.min.js:13:9511
[6][6][6]j@file:///C:/Users/777/Desktop/less/less.min.js:13:9446
k@file:///C:/Users/777/Desktop/less/less.min.js:13:9570
[7][7][2]<@file:///C:/Users/777/Desktop/less/less.min.js:13:1747
e@file:///C:/Users/777/Desktop/less/less.min.js:13:539
a@file:///C:/Users/777/Desktop/less/less.min.js:13:714
@file:///C:/Users/777/Desktop/less/less.min.js:13:1
@file:///C:/Users/777/Desktop/less/less.min.js:13:271
@file:///C:/Users/777/Desktop/less/less.min.js:13:1


Что не так в .gradient?
  • Вопрос задан
  • 339 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
27cm
@27cm
TODO: Написать статус
Опечатка в -0-linear-gradient, должно быть -o-linear-gradient.

Ещё, как минимум, косяки с фильтрами и #textColor вместо @textColor.

Как-то так должно быть: codepen.io/27cm/pen/meKgVW?editors=010
@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f4f4f4;

div#nav {
    ul{
      li{
        list-style: none;
        a {
          text-decoration: none;
          font-family: verdana;
          font-size: 14px;
          color: @textColor;
          float: left;
          padding: 15px 30px;
          border-right: 1px solid fadeout(@textColor, 60%);
          .gradient(@mainColor2, @mainColor);
          &:hover {
            .gradient (@mainColor, @mainColor2);
          }
        }
      }
   }
}

.gradient (@col, @col2) {
  background-color: @col;
  background-image: -webkit-gradient(linear, left top, left bottom, from (@col), to (@col2));
  background-image: -webkit-linear-gradient(top, @col, @col2);
  background-image: -moz-linear-gradient(top, @col, @col2);
  background-image: -ms-linear-gradient(top, @col, @col2);
  background-image: -o-linear-gradient(top, @col, @col2);
  background-image: linear-gradient(top, @col, @col2);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{col}', EndColorStr='@{col2}')";
  -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{col}', EndColorStr='@{col2}')";
}


К слову, не нужно использовать примеси для расстановки вендорных префиксов. Для этого есть autoprefixer.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
ITK academy • Нижний Новгород
от 50 000 до 90 000 ₽
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Middle+/Senior Frontend Engineer
Data Directs • Тель-Авив
от 350 000 ₽
Ещё вакансии