LESS css isn't working, what's wrong with this setup

Question

I'm new to less css and trying it out. I've done the following

I've added this div

<div class="myclass">This is a test of LESS CSS</div>

and in the mystyles.less, added this

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

.myclass {
    .somepattern();
}

When I change the syntax to this, it works, which means the problem is in the syntax of caling .somepattern. I tried .somepattern() and .somepattern and somepattern but nothing works. The only thing that works is the plain old way of having the code in the class itself

.myclass {
    font-size:16px;
    font-weight:bold;
    border:2px solid red;
}

Answer 1

You don't have to use .somepattern(); just somepattern;

So:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

.myclass {
    .somepattern;
}

Answer 2

You have to use "stylesheet/less" instead of plain "stylesheet" as the rel paramater. It should look like this:

<link href="mystyles.less" media="screen" rel="stylesheet/less" type="text/css" />