.png)
How to Quickly Set Up Less.js
Less.js (or just Less) is a CSS preprocessor that can revolutionize the way you write CSS. And it’s easy to install and set up for web development.
There are several ways to install and configure Less, but for developing in the browser, or if you’re just interested in trying it out without having to install it on a web server, the fastest way is to reference the
less.js library in an HTML document. Let me show you how.
First, download Less.js from GitHub.
Alternatively: If you use Git, fire up the CLI, navigate to your project’s directory, and then clone the Less repo to your computer:
git clone https://github.com/less/less.js.git
There’s a lot of files and directories inside the
less.js-master directory when you open it but we’re only interested in what’s inside the dist directory (which in open source lingo is short for "distribution" directory, the files for production use).
Inside the
dist directory you’ll find two JavaScript files: less.js andless.min.js — you can use either one.
less.js is the commented version, which is great if you like reading source code.less.min.js is a minified version that has a smaller file size.
Put
less.js or less.min.js in your project’s directory.
With your code editor or text editor:
- Create an HTML document.
- Create a Less stylesheet. It should have a file extension of
.less. Example:styles.less.
In the
<head> of your HTML document, reference your Less stylesheet and the Less JS file you placed in your project’s directory:<head>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
Testing the Setup
You’re now ready to use Less.
To test your setup, you can write some Less syntax inside your Less stylesheet and then see if it renders correctly in your browser.
The Less CSS below uses Less variables and the Less
saturation() anddesaturation() color functions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Less.js: Quick Setup</title>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<h1>Less.js: Quick Setup</h1>
<p><a href="http://sixrevisions.com/tutorials/set-up-less-js/">Read the tutorial</a></p>
</body>
</html>
LESS
/* Variables */
@body-bg-color: #83b692; // green
@text-color: #fff; // white
@button-bg-color: #f9627d; // pink
/* LESS CSS */
body {
background: @body-bg-color;
color: @text-color;
font-family: sans-serif;
text-align: center;
}
a:link, a:visited {
background: @button-bg-color;
color: @text-color;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
}
a:hover {
background-color: desaturate(@button-bg-color, 50%);
}
a:active {
background-color: saturate(@button-bg-color, 50%);
}
Result
In-browser Error Hints
By default, Less will warn you whenever it encounters errors in the web page. This is useful during web development.
Compile Less CSS Before Deployment
Once development is complete, compile
.less files into regular .css files. If you want to do this quick-and-dirty, you can use an online Less compiler.
The Less CSS above was compiled to the following by using LESSTESTER:
/* Variables */
/* LESS CSS */
body {
background: #83b692;
color: #ffffff;
font-family: sans-serif;
text-align: center;
}
a:link,
a:visited {
background: #f9627d;
color: #ffffff;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
}
a:hover {
background-color: #d08b97;
}
a:active {
background-color: #ff5c79;
}Moving Forward with Less
Though the method described in this tutorial is the fastest way to get up and running with Less, it’s best used only for exploring, testing, and development because having the JavaScript library process your CSS every time a visitor requests your web page is bad for performance.
Once you’re ready to commit to Less and use it in your web development projects, the best options would be to install and set it up on the web server or to remove the
less.js library and compile your Less CSS to normal CSS.
0 comments :