Question

我刚学习less。我有html这样的文件

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title>.::LESS::.</title>
  <link rel="stylesheet" type=text/css"" href="style.less" />
  <script type="text/javascript" src="less.js"></script>
</head>
<body>
  <div class="box1">This is box1</div>
  <div class="box2">This is box2</div>
  <div class="box3">This is box3</div>
</body>
</html>

我的style.less文件就像这样

@blue : #00c;
@light-blue: @blue + #333;
@deep-blue: @blue - #333;
.box1 {
  background-color: @blue;
}
.box2 {
  background-color: @light-blue;
}
.box3 {
  background-color: @deep-blue;
}

但毕竟当我要检查html page from the browser时它没有显示任何内容。如果我changing the values of background-color到any color values那么可以在那里看到背景颜色。可以看到有人告诉我错误的部分在哪里？欢迎任何帮助和建议。谢谢。

Answer 1

你错过了浅蓝色的＃。 this它应该是什么样的？

Answer 2

您的代码正确编译为

.box1 {
  background-color: #00c;
}
.box2 {
  background-color: #3333ff;
}
.box3 {
  background-color: #000099;
}

但是，您写了以下这一行：

<link rel="stylesheet" type=text/css"" href="style.less" />

应该是：

<link rel="stylesheet/less" type="text/css" href="style.less" />

试试这个并再次检查它是否有效。

颜色变量值较小时出错

2 个答案: