How to fix an error when compiling less styles?

V

valikhan2015-11-01 16:29:49

css

valikhan, 2015-11-01 16:29:49

Did lessons on using 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')";
  }

It gave an error -

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/[email protected]:///C:/Users/777/Desktop/less/less.min.js:14:13532
[85][84][85]i/< [email protected]:///C:/Users/777/Desktop/less/less.min.js:14:13581
[34][40][email protected]:///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
[email protected]:///C:/Users/777/Desktop/less/less.min.js: 13:9570
[7][7][2]<@file:///C:/Users/777/Desktop/less/less.min.js:13:1747
[email protected]:///C:/Users/777/ Desktop/less/less.min.js:13:539
[email protected]:///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

What's wrong with .gradient?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

C

Cat Anton, 2015-11-01
@valikhan

Typo in - 0 -linear-gradient, should be - o -linear-gradient.
Still, at least, jambs with filters and #textColor instead of @textColor.
It should be something like this: 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}')";
}

By the way, you don't need to use mixins to place vendor prefixes. There is an autoprefixer for that .