Web Application Development: Using "LESS" for Less CSS Complications
Being a web programmer, even if you are a front-end UX/UI developer or focus on back-end programming (mobile app and/or desktop applications), you could end up being a web developer at some point in your career and will come across something called CSS.
Image credits: bethesignal.org
With CSS (Cascade Style Sheets), the main issue is either having a bunch of tiny and repetitive files (for keeping everything organized) or having one or a few huge files with all the rules thrown in there. Try the best you can to keep the organization and functionality of every rule.
The annoying part starts when you have to support a different number of browsers and their ways of handling the same instructions as well as the variety of resolutions and themes for your page/project (we will talk about responsive pages in a later post). Additionally, you will have to support a number of mobile platforms including Android, iPhone, iPad, and other tablets and smartphones.
Like with every problem, sooner or later comes a good and efficient solution. Regarding CSS, here is one solution: LESS. LESS uses files with the extension .less and js to create the Style files dynamically as the page loads.
A few tips for using LESS
How often does it happen that you want to change a color scheme or a color of a given object many times? Traditionally, this is done by replacing many different files. However, how about if you want to change the fonts, or the border-radius for the corners, or any other value that you use in the system?
Here's where the functionality of LESS starts to shine, even that CSS promised some of this functionality on the web browser.
To create a variable you only need to do this:
Now you can set up as may variables as you see fit using them like this:
A function is a set of “operations” or instructions of CSS and it may also call other functions. This will work for when you want to execute something many times and you don’t want to write all the rules that you need for it to work on every browser.
This function is one simple example of how we can practice the use of LESS to make the use of CSS easier. For example if you what to make an item to have round corners with a 10 pixels radius we would do it like this:
But if you call the function without parameters:
For the way that the function is configured it will take the default value in this case @radius: 5px
Obviously, this example can be made more and more complex and there is more to learn as you get familiar with the capabilities of LESS.
You can insert nested elements in order to make the structure of the stylesheet more clear
You can include files within others, simply to make more organized your code or to reduce your LESS “libraries”
You get to use all the regular selectors of CSS (:, +, ~, >, :hover, :Visited, :link, etc.)
With good planning you can reuse a lot that you make.
You can return to CSS very easily.
Here is an example of a basic library file :
Here is a file that uses that library:
You can see how the code is simpler, clear and manageable.
Returning to CSS
~ WinLESS - (Windows) pretty simple GUI. It looks like it uses less.js (my personal choice!)
~ SimpleLESS - (Multiplarform) another GUI. Worsk also pretty well.
~ LessAPP - (Mac) One of the first Desktop tools for compiling *.less. Sort of like the grandfather of WinLESS and SimpleLESS.
If you are using a text editor that highlights the code you can configure it to match the CSS format with the .less files, so you get the highlighted code.
Beware: As you get some experience with this tool you will be creating some interesting stuff and maybe, you don’t want go back to CSS. If you want to learn more, download and use this tool from here. Have fun and try to keep everything smooth and looking great!
About the author
Antares Farias is a Computer Systems Engineer with almost 6 years of experience in software development and more than 3 years in web development and mobile application development. He currently works at iTexico as Web Developer.