Introduction
Ever since the dawn of programming, we have had the luxury of variables, OOP, functions and other lovely tools within our languages.
CSS is arguably the easiest language to ever pick up, with everyone having to learn it’s basics. However, it lacks any power, as we have to repeat stuff over and over, which makes it a night mere if you want to quickly make a few changes etc. LESS is a breakthrough in website design, as you can have the beauty of functions and variables – so if you wanted to change your entire colour scheme, it’s as easy of changing one variable.
Just before we begin, download the LESS compiler tar.gz (http://leafo.net/lessphp/) and setup a file system:
Files and folders
I have a home folder, with less, css and inc folders. The inc filder contains the lessc.inc.php file and all of the other junk that comes in the TAR.GZ download. The less folder contains the LESS we’re going to write, and the css folder will contain the CSS output. In the home folder I have two files: compile.php and home.php.
Compiler
Let’s start with compile.php. This file must be ran every time you make changes to your LESS.
# Require the LESS include
require "inc/lessc.inc.php";
# Fire up the compiler class
$less = new lessc;
# Run the compiler. Takes everything in style.less, tweaks it, and shoves it all in style.css
$less->compileFile("less/style.less", "css/style.css");
HTML page
In order to see our magnificent work (and put this tutorial into perspective) let’s make a basic HTML5 page everyone should be familiar with. Copy the code of the following page, and after we’ll write some cool LESS to go with it!
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>mattster's "Power of LESS" Tutorial</title>
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<h1 class="page">My page</h1>
<section>
<p>This is my section, with a <a href="http://daniweb.com/" target="_new">hyperlink!</a></p>
</section>
</body>
</html>
So now we a normal boring page. Now we need to make it sexy – DaniWeb style.
LESS is more!
The following source code gently breaks us into the world of compiled CSS, a vital element of modern web design. When I say gently I mean it, there’s a world of power behind LESS, so please take a read of http://leafo.net/lessphp/docs/ to take full advantage! We have two LESS files. variables.less stores all of the variabeles, general.less most of our styles and style.less to combine them.
style.less
/* Include all of our LESS files togther like a happy family */
/* We only have one, but if you had header.less, footer.less - here is the place */
@import "general.less";
/* Include our variables file */
@import "variables.less";
variables.less
/* Set the variables using a real basic @<var_name>: <var_value>; Can be colours, text, sizes (px/%) etc.*/
@black: #434343;
@grey: #e5e5e5;
@white: #fff;
@themeColor: #752F8E;
@PageBorderHeight: 3px;
general.less
body{
margin: 0;
/* In LESS, the "@" sign means a variable, so @grey will be replaced with whatever we make @grey in variables.less */
background: @grey;
color: @black;
border-top: @PageBorderHeight solid @themeColor;
}
h1 {
color: @themeColor;
text-align:center;
padding:20px 0;
}
section {
background:@white;
margin: 10px 30px;
padding: 20px;
/* You can use basic maths (you may have to put it in brackets) - here the section border is relative to @PageBorderHeight */
/* Use the darken function to automatically generate a border colour 20% darker than the variable @grey */
border: (2 * @PageBorderHeight / 3) solid darken(@grey,20%);
/* This is calling the function (mixin) we write at the bottom of this file. We are setting the radius parameter to "15px" */
.border-radius(15px);
/* This is a nested class: placing the "a" tag here will compile to "section a" */
a {
color:@themeColor;
/* As with a normal nested sub-class, the "&:hover" here will return as "section a:hover" */
&:hover {
color: darken(@themeColor,13%);
}
}
}
/* This is called a mixin (AKA a function). It has a default setting of 5px, but this can be changed when the function is called (see above) */
.border-radius(@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
Note: you can use mixins for just about anything: transitions, gradients, border-radius’ or if you want to repeat the same code over and over, just call a mixin. The whole point of LESS is that you can minimize and simplify your code, and that you can change one thing and the whole stylesheet is affected – hence variables and mixins are ace.
So now you can understand the basic principles of LESS! Yay well done you. Now go out there and use it, learn some more and develop some great websites with it. Note that Bootstrap has a LESS source, so maybe tweak that and come back to me with your own Bootstrap skin!
Result: http://jsfiddle.net/0w3cjL0z/
Thanks for reading guys, please let me see anything you do with LESS!!
mattster
