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

末蓝、 2023-09-25 15:00 44阅读 0赞

#### 文章目录 ####

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

![在这里插入图片描述][e400c56e1d4049499de9e65710c18b7c.png]

## 1. 复现问题 ##

今天在写全网最详细的`less`教程，教程的连接地址为：[全网最详细的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

![在这里插入图片描述][7d3c455475244242b72bc38355f77956.png]

[e400c56e1d4049499de9e65710c18b7c.png]: https://img-blog.csdnimg.cn/e400c56e1d4049499de9e65710c18b7c.png
[less]: https://blog.csdn.net/lvoelife/article/details/126085302
[7d3c455475244242b72bc38355f77956.png]: https://img-blog.csdnimg.cn/7d3c455475244242b72bc38355f77956.png