LESS: How do I change the color of the header? I tried, but it doesn't work

Question

Here's my HTML:

<html>
<head>
<link rel="less/less.js" href="css/style.less">

</head>

<header> This is a header. </header>

</html>

style.less:

@light-blue: @blue + #111;

#header {
  color: @light-blue;
}

And the header still shows up just regular black. Not light blue. There are no error messages in the console.

Answer 1

You are using #header , this means you are calling an element having an id="header" , change it to header to capture the header element.

Also, you are confusing the js and less links. Less shall be embedded to your code as follows :

<link rel="stylesheet/less" type="text/css" href="css/style.less" />
<script src="less/less.js" type="text/javascript"></script>

Also, set the @blue with a valid color :

@blue: #5B83AD;
@light-blue: @blue + #111;