5

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Derek
  • 475
  • 1
  • 9
  • 18
  • 2
    Before you dive into less, I would start by getting a decent foundation in plain old css. – Maess Feb 20 '12 at 21:32

1 Answers1

4

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.

tkone
  • 22,092
  • 5
  • 54
  • 78
  • As the commenters above stated though, if you don't know CSS you're going to have a hard time with LESS since, well, LESS *IS* CSS. It just provides some time-saving functionality, but you're still typing in pure CSS for the most part... – tkone Feb 20 '12 at 21:39
  • Thanks tkone. I got it working. With NetBeans you have to stop/start the project before seeing changes. A simple refresh of the browser won't do. I'll look into the compiler option you mentioned. I work in a Windows environment. Thanks again... – Derek Feb 20 '12 at 22:35
  • You want to accept the answer then? Node and therefor less for node both run under windows. – tkone Feb 21 '12 at 03:38