Start with LESS

Question

I am very new to web design ... well, now that this is not the case, where do I declare variables in the LESS / CSS structure?

I am using NetBeans IDE 7.0.1 I am also using Bootstrap 2.0 (not sure if that matters). I downloaded the latest version of LESS from lesscss.org, but downloaded only the smaller 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> 

I can’t wait to start assigning values ​​to variables, but I'm just not sure which file to do this?

Thanks everyone!

Answer 1

You do this in your smaller 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 including less.js file.

FYI, I believe that in fact it is a much better model for connecting 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 this .css file to your page.

This way, I do not need to run the converter before we begin the deployment.