The Hard-Core Coder’s Guide To Less CSS

The Hard-Core Coder’s Guide To Less CSS

By myclever™ Agency

WARNING before you begin, this truly is the coders guide to hard-core coding. Therefore you may want to take our quick test first:
If you know what DOM and OOP stand for – then please continue!

For those who still dare to enter without knowing what the above stand for – DOM (Document Object Model) OOP (Object Oriented Programming)

Now lets begin…

Less is a way of simplifying cascading style sheet pre-processor, allowing you to use multiple variables and different features in the creation of your style sheets. This then outputs a style sheet using all these different methods.
http://www.mycleveragency.com/2014/04/the-hard-core-coders-guide-to-less-css/
One advantage of using a CSS pre-processor is that it saves you time, it allows you to work more efficiently as you should be using ‘DRY’ (Don’t Repeat Yourself) methodology while referencing code rather than re-writing it each time. As a result, it’s a lot easier when working in teams, as  it allows a much more logical organisation of your code, and due to the availability of multiple files means different team members can work on different files at the same time while still effectively working on the same project.

Variables

The most commonly used function of Less is also the simplest. Less allows you to use declared variables in your code, now this can be used to set some commonly used colours or to set global font sizes. With the variables you can then reference them within your code allowing you to easily change the styles of EVERYTHING in a matter of seconds.

@background: url(‘../images/background_blue.png’) no-repeat top center;
@standard-font-size: 15px;

body{
background : @background;
font-size: @ standard-font-size;
}

Maths

Normally I wouldn’t get too excited about using maths but with the use of Less you can use maths to your advantage. Less allows you to use simple mathmatics to set different sizes for variables.
The example below is going to look at styling two image classes, small and a large image. The large image needs to be twice the size of the small image including the padding.

@small-image-width : 100px;
@padding : 10px;

.small_image{
Width: @small-image-width;
Padding: @padding;
}
.large_image{
width: ((@small-image-size + @padding) * 2)
padding: @padding;
}

Mixins

Mixins are essentially functions for CSS written in a similar way to php and javascript functions. It allows you to output multiple lines of CSS with just the single function. For example if you wanted to add similar code to numerous different classes, instead of re-writing your code multiple times.

Mixins File:

.rounded(@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// This is a function for adding border radius to your classes, the default for this is 2px.

Style.less file:

.image_class{
// I want a 10px border radius on this
.rounded(10px);
}
.image_class_small{
// I want a 2px border radius on this
.rounded();
}

File Imports

File imports allow you to keep your code nice and tidy rather than having all your code on one HUGE style sheet, you can simply keep everything in different files and import them into your style sheet.
So you can keep all your font declarations in a file, media queries in another file and declare all your variables in a different file.

It’s so easy to import files.

@import 'includes/vars.less';
@import 'includes/mixins.less';

Class Extensions

Now this is another way you can avoid repeating your code. For example if you wanted to have three classes all exactly the same apart from the background colour. You could simply extend the code from the first box into the second and third and then essentially overwrite your background-colour code.

.square_1{
width:100px;
height:100px;
padding: 15px;
margin:10px;
background-color: #FF0000;
}
.square_2{
&:extend(.square_1);
background-color:#00FF00;
}
.square_2{
&:extend(.square_1);
background-color:#0000FF;
}

 

Over to you

What do you think? Have you used Less CSS?

 

References:

http://www.hongkiat.com/blog/less-css-new-features/

http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained

This post was written by myclever™ Agency

Exceptional marketing is driven by human insight. myclever™ Agency craft beautiful, useful and engaging experiences with social media at the heart.