解决NameError: variable @color is undefined in xxx的错误

最新推荐文章于 2023-03-15 16:50:24 发布

互联网全栈开发实战

最新推荐文章于 2023-03-15 16:50:24 发布

阅读量2k

点赞数 2

分类专栏：免费专栏文章标签： css html 前端 less javascript

本文链接：https://blog.csdn.net/lvoelife/article/details/128920756

版权

免费专栏专栏收录该内容

157 篇文章 19 订阅

订阅专栏

文章目录

1. 复现问题
2. 分析问题
3. 解决问题

在这里插入图片描述

1. 复现问题

今天在写全网最详细的less教程，教程的连接地址为：全网最详细的less教程

将test.less编译成test.css文件时，遇到了如下问题：

D:\project\1myProject\bloghtml\less>lessc test.less test.css
NameError: variable @color is undefined in D:\project\1myProject\bloghtml\less\test.less on line 8, column 21:
7   height: 50px;
8   border: 1px solid @color;
9 }

2. 分析问题

variable @color is undefined翻译成中文是变量@color未定义。

但我在文件中已经定义了，如下代码所示：

/*设置颜色变量*/
@color:green

/*边框定义绿色*/
#div1 {
  width: 50px;
  height: 50px;
  border: 1px solid @color;
}
 
/*边框定义红色*/
#div2 {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
  
/*边框定义黄色*/
#div3 {
  width: 50px;
  height: 50px;
  border: 1px solid yellow;
}

...

既然定义了，为什么说是未定义呢？会不会是我test.html的代码有问题，test.html代码如下所示：

<!doctype html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="div1">这是div1</div>
<div id="div2">这是div2</div>
<div id="div3">这是div3</div>
</body>
</html>

我在test.html虽然引入了test.css，但这也是test.less编译后才生效。因而，确定test.html不会导致该错误。

于是再去排查源代码，发现@color:green没有加上分号;。

3. 解决问题

在@color:green加上分号即可，如下代码所示：

/*设置颜色变量*/
@color:green;
/*边框定义绿色*/
#div1 {
  width: 50px;
  height: 50px;
  border: 1px solid @color;
}
...

重新执行如下命令即可：

D:\project\1myProject\bloghtml\less>lessc test.less test.css

在这里插入图片描述

互联网全栈开发实战

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决NameError: variable @color is undefined in xxx的错误

解决NameError: variable @color is undefined in D:\project\1myProject\bloghtml\less\test.less on line 8, column 21的错误。
复制链接

扫一扫