Design Method

A Simple Introduction to Less CSS.


 

Required Resources

You will need the following:

Outcome of this Tutorial

You should understand the concept of LESS and be able to start creating your own webpages built using LESS. This tutorial is just an introduction and will illustrate some key concepts to bear in mind whilst using LESS.

What is LESS?

http://LESScss.org – LESScss is a “Dynamic Stylesheet Language”. To a seasoned website developer, LESS should be fairly easy to grasp, the key is indeed in the name “LESS CSS”. Using LESS instead of conventional CSS will allow website developers to write much LESS CSS than usual, owing to the way that LESS code is structured. LESS also allows users to employ the use of variables, mixins, operations & functions. Hang on a minute – what are these things? To anyone who has some knowledge of scripting languages, or server side languages, these terms may not seem so unusual.

  • Variables: These are quite self-explanatory, variables are simply a way of storing data with the intention of re-using the stored data multiple times. The stored data is given a unique way of identifying it for reuse.
    The syntax for LESS variables is as follows: @variableName: data;
    So the data stored within this variable is the string “data”.
  • Mixins: These allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
  • Functions & Operations: Operations let you add, subtract, divide and multiply property values and colours, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.

How does it work?

LESS runs on both the server-side, or client side. For the purpose of this tutorial; we will be using it on the client side.
Through this tutorial we are going to be adding styles through LESS to a very simple webpage. Please bear in mind that this webpage was not designed to look pretty in any way, shape or form. It is simply to be used as an example for how to use LESS to optimize your CSS.

Firstly, ensure that you’ve downloaded the tutorial files, obviously the files are the finished version, so here we will go through step by step, analyzing how it works.

Now you will want to install a LESS compiler, once you’ve chosen your applicable LESS compiler, install it as you would any other program.
Once it’s installed you will need to click the “Add Folder” button to add the folder you wish to be monitored. Basically the folder that’s monitored will contain the LESS file, this is where you write your LESScss. The compiler monitoring the LESS folder will detect each time you save / update the LESS file. It will then compile the LESS code into CSS code, and update your CSS file accordingly.

Once you have your LESS compiler set up, you’re ready to start learning how to write LESS CSS

[html]
<body>
<div class="clearfix" id="wrapper">
<div class="clearfix" id="header">
<a href="index.html"><img src="http://placehold.it/220×120&text=Company+Logo" /></a>
<ul>
<li class="first"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Products</a></li>
<li class="last"><a href="index.html">Contact</a></li>
</ul>
<!–/#header–></div>
<div id="main">
<h1>Welcome to Company Name</h1>
<p>Ollie north bluntslide death box handplant. John Cardiel face plant street feeble lipslide. Bone air hurricane hardware speed wobbles. Yeah soul skate 900 mini ramp. Nose-bump boardslide death box hanger. Masonite airwalk air slob air. Durometer quarter pipe Jeremy Wray death box full pipe. Aerial lien air wheels Shiloh Greathouse slob air. Snake Andrew Reynolds handplant fast plant nose-bump. Frontside air nosegrind pressure flip vert. Betty griptape Ron Allen death box judo air. Steps shinner nosegrind Skateboard Shuffle gap. Jason Jesse gnarly ollie hole fast plant vert. </p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<h2>Registered Users Login</h2>
<form action="#" method="post">
<input type="email" name="email" id="email" placeholder="Your Email Address" />
<input type="password" name="password" id="password" placeholder="Your Password" />
<input type="submit" value="Submit" />
</form>
<!–/#main–></div>
<div id="aside">
<h3>Our Services</h3>
<p>Ollie north bluntslide death box handplant. John Cardiel face plant street feeble lipslide. Bone air hurricane hardware speed wobbles.</p>
<ul>
<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
<li class="last"><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
</ul>
<!–/#aside–></div>
<!–/#wrapper–></div>
</body>
[/html]

So, as you should be able to see here we have the HTML structure for a very basic webpage. This webpage has a “wrapper” div, which will keep all of the content contained inside it, we will set this to a specific size and centre it.
Within the wrapper we have a “header” div, which will contain the logo & navigation.
We will then have a “main” div, containing the main content, as well as an “aside” div, which will hold the content for the sidebar.

Now that you’ve got your head round the HTML structure you should be ready to begin using LESS to compile your CSS.

So within your “styles.LESS” file you will begin writing your LESS.

[css]
@charset &quot;utf-8&quot;;
@import &quot;elements.LESS&quot;;
/* CSS Document */

@font-size : 14px;
@heading-font: &quot;Georgia&quot;, Times New Roman, Times, serif;
@big-heading: 26px;
@small-heading: 16px;
@border-color: #A1A1A1;
@border-padding: 20px;
@impact-font: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
@impact-size: 22px;
[/css]

It’s a good idea to set your variables at the top of each file so that they are available to use throughout.

So the variables here are defined by the “@” symbol. To declare a new variable we write @variableName : variable;. These variables are now ready to use in our code. The importance of these variables lies in the fact that we can change every instance of the variables just by changing one line of code rather than having to go through and manually change it within each selector. For example if we wanted to change the overall font size of a site using just straight CSS we would have to go through and actually change each declaration of the font-size, however here we would just change the variable value, and each declaration where we have used this variable will change accordingly.

Here we have set the font size, the font for the headings, a font size for larger headings, a standard border colour, the padding sometimes required for borders, a font that will have impact, and the font size for an impact heavy font.

You will see at the top of the LESS file that another LESS file has been imported. This is a useful library of mixins which can be used, since we have imported it into our own LESS file any of the mixins from the ELEMENTS.LESS file can be used within our file. LESSelements.com

To illustrate the use of the ELEMENTS.LESS file; we will use one of the mixins within it, specifically Gradients.

[css]
html {
font-size:@font-size;
.gradient(#F5F5F5, #EEE, #FFF);
margin:0;
padding:0;
height:100%;
}
[/css]

Within the CSS rules for HTML we have firstly used the font-size variable to set the overall font size for anything within HTML tags on the page.
Secondly we have also used the .gradient mixin from the ELEMENTS.LESS file. Using this we have been able to produce a gradient background applied to the HTML of the page. So to use this, the first colour is the background colour to use for browsers that don’t support gradients. The second two colours are the start and stop colors, going from bottom to top.
So, by using LESS & LESS elements we have been able to add a light grey gradient background to our HTML, just by writing a few lines of code. The outputted CSS for the gradient mixin will illustrate just how much more efficient it is to use LESS rather than straight CSS. See below.

[css]
background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#eee),color-stop(1,#fff));
background:-ms-linear-gradient(bottom,#eee,#fff);
background:-moz-linear-gradient(center bottom,#eee 0,#fff 100%);
background:-o-linear-gradient(#fff,#eee);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#eeeeee’, GradientType=0);
[/css]

The great thing about the compilation of this CSS from the mixin is that it is as compatible as can be with all major browsers, even better – you don’t have to write any of it, you just simply use the mixin and let the LESS compiler do the rest of the work for you!

The code below will illustrate another major advantage of using LESS. Pay close attention to the structure of the CSS.

[css]
a {
color:#3D3D3D;
text-decoration:none;
&amp;:hover {
color:#2E2E2E;
text-decoration:underline;
}
}
[/css]

A savvy developer should realise that the CSS rule is declaring the colour for anchor tags, setting them not to be underlined, and then the important bit… The hover state for anchors is set within the selector for anchors. Below is the conventional way of writing the above rule with just CSS.

[css]
a {
color:#3D3D3D;
text-decoration:none;
}
a:hover {
color:#2E2E2E;
text-decoration:underline;
}
[/css]

This is the advantageous LESS structure being used in a very simple way, so lets try and make use of this in a more beneficial way.

[css]
#header {
padding-bottom:@border-padding;
border-bottom:1px solid @border-color;
margin-bottom:20px;
p {
color:#0f0;
font-size:@font-size + 6px;
}
img {
float:left;
}
ul {
list-style:none;
margin:40px 0 0 0;
float:right;
padding:0;
height:80px;
.gradient(#F5F5F5, #E3E3E3, #F0F0F0);
border-radius:6px;
}
ul li {
float:left;
margin:0;
border-right:1px solid #A1A1A1;
height:80px;
width:100px;
text-align:center;
&amp;:hover {
.gradient(#d1d1d1, #d3d3d3, #DCDCDC);
}
&amp;.first {
border-top-left-radius:9px;
border-bottom-left-radius:9px;
}
&amp;.last {
border-right:none;
border-top-right-radius:9px;
border-bottom-right-radius:9px;
}
a {
color:#3D3D3D;
text-decoration:none;
line-height:70px;
display:block;
&amp;:hover {
color:#2E2E2E;
}
}
}
}
[/css]

The nested structure that LESS can utilize is quite prevalent in the code above. All of the rules we wish to apply to the header div can be contained within the header selector. For instance; the rules which we wish to apply directly to the header div are listed at the top of the declaration. We’ve set the header itself to have a bottom border, with some padding to put a bit of air between it and the header content.

The other CSS within the header rule apply only to elements within the header. We have set rules for “p”,”img”, & “ul” just within the header declaration, these rules will apply directly to Paragraphs, images & unordered lists only within the header div. This is a much more efficient way of writing rules for each of the elements within the header. Below we can see a brief example of how this would be structured conventionally.

[css]
#header p {
color:#0f0;
font-size:@font-size + 6px;
}
#header img {

}
#header ul {
list-style:none;
margin:40px 0 0 0;
float:right;
padding:0;
height:80px;
.gradient(#F5F5F5, #E3E3E3, #F0F0F0);
border-radius:6px;
}
[/css]

If we refer back to the efficient way of writing it using LESS, and we look specifically at the “ul li” selector within the header rule, then we can see “&” being used. In this instance, “&:hover” is the hover state of the parent element, which in this case is the “ul li”, which is within the header. So in other words the “&:hover” nested within the “ul li” refers to the hover state of all list items within unordered lists within the header div.

Rather than constructing long selector names to specify inheritance, in LESS you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

[css]
#main {
float:left;
width:580px;
margin:0 20px 0 0;
h1,h2 {
font-family:@heading-font;
}
ul {
border-top:1px solid @border-color;
border-bottom:1px solid @border-color;
padding-bottom:@border-padding;
padding-top:@border-padding;
li {
margin:10px auto;
font-family:@impact-font;
font-weight:bold;
font-size:@impact-size;
}
}
form {
label {
font-family:@heading-font;
}
input[type=email], input[type=password] {
border:1px solid @border-color;
padding:10px 5px;
.gradient(#F5F5F5, #E3E3E3, #F0F0F0);
width:150px;
}
input[type=submit] {
.gradient(#E58F90, #FF0000, #E58F90);
border:1px solid @border-color;
padding:10px;
color:#ffffff;
font-weight:bold;
width:150px;
cursor:pointer;
}
}
}
[/css]

In the code above you will see that we have moved on to styling the main div, using the same nested selector technique as before. On the unordered list (ul) & list items within it (li) we’ve made use of the variables we declared at the beginning of the file, as well as making use of the gradient class from the elements.less file to give the form within the main div a gradient background. We’ve also been able to style the border colour using variables as well. In fact most of the LESS within the main selector has been created using some basic LESS techniques. Basic techniques but still very useful & efficient nonetheless!

[css]
#aside {
float:left;
width:320px;
h3 {
font-family:@heading-font;
font-size:@big-heading;
}
ul {
list-style:none;
margin:0;
padding:0;
li {
border:1px solid @border-color;
border-bottom:0;
padding:10px;
.gradient(#F5F5F5, #E3E3E3, #F0F0F0);
&amp;:hover {
.gradient(#d1d1d1, #d3d3d3, #DCDCDC);
}
&amp;.last {
border-bottom:1px solid @border-color;
}
}
}
}
[/css]

In the last of our code you will see once again the advantages of the nested LESS structure come into play. If you’ve been paying attention you’ll see that the list items within the unordered list in the aside div have a hover state declared for them, and using the nested selectors you can create a class called “last” and it will only apply to the list items within the aside ul li.

Hopefully, if you’ve made it this far through the tutorial you should have found it somewhat useful, since this is a simple introduction to LESS we’ve touched on some of the key foundations and features which make LESS such a beneficial tool to use.

To use a CSS pre-processor you are not restricted to just using LESS, there are other options available to you such as SASS, similar to LESS, you will have to make up your own mind as to which one you should use!

To view a working example of this click here

Contact