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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With