Menu
I really want to learn LESS but have had NO luck getting it to work at all. I would like to get it to work locally. Please help.
I just want to do a simple test. Here is my LESS code:
@color: red;
.header {
color: @color;
}
h2 {
color: @color;
}
And here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LESS TEST</title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<div class="header"> <h2>This is a test</h2> </div>
</body>
</html>
So the header class should be red and also the H2 should be red. But they do not display with any styling on any browser. Please help!
660
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Using Less. js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.
Create a stylesheet with . less extension and link it in your document using the rel="stylesheet/less" attribute. You are all set and can compose styles within the . less .
CSS and LESS are not completely different, but LESS does offer additional features that make your projects easier. More than that, the compiled version of LESS is actual CSS. Feel free to share your feedback as comments to this blog.
Your code works perfectly, as shown in this screenshot:
Note that I downloaded a minified version of less.js locally prior to running this. I suggest you verify:
file:///path/less.js URL -- Chrome gives me a "cross origin request" error.
160
Disable cache in Chrome, worked in my case.
27
I use WINLESS. It's free, it's easy to use and very powerful on minifying the code.
You don't have to emulate an Apache server to use it.
Good luck!
42
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
