Home/ Questions/Q 8390311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:56:59+00:00

I am just learning less .I have my html file like this <!DOCTYPE HTML>

  • 0

I am just learning less.I have my html file like this

<!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>

and my style.less file is like this

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

But after all this when I am going to check the html page from the browser it is not showing anything.If I am changing the values of background-color to any color values then the background color can be seen over there.Can some one tell me where is the wrong part?Any help and suggestions will be welcome.Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code compiles correctly to

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

    However, the following line you wrote:

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

    should be: 

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

    Try this and check again if it works.

    • 0