getting started with LESS

Question

I'm very new to web design...okay, now that that's out of the way, where do I declare variables in the LESS/CSS framework?

I'm using NetBeans IDE 7.0.1 I'm also using Bootstrap 2.0 (not sure if this matters). I downloaded the latest version of LESS from lesscss.org but it only downloads the minified version.

Here are my links and script tags in the header:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/realcardio.css" media="all">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript" src="bootstrap/js/less-1.2.1.min.js"></script>

Can't wait to start assigning values to variables but I'm just not sure what file to do this in?

Thanks all!

Answer 1

You do it in your less file!

sample.less

@font_color: #666;
@font_size: 15px;

body {
    color: @font_color;
    font_size: @font_size;
}

Then you include this .less file:

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

Before you include the less.js file.

FYI, I find it's actually a much better model to hook up something so that every time you save your .less file in your editor, it compiles it using the node lessc compiler into a .css file and you just include that .css file in your page.

This way I don't have to run a convert before we do a deploy at work.