A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin . . For any IT related services contact us now! USA:+1(512)7348342 INDIA:+91-8983485655 Check bio [email protected] .. . . . . #CSS #CSSpreprocessor #saas #less #stylus #postcss #mobiledev #creative #designer #digitalmarketing #socialmediahelp #marketing #digitalmarketing #emailmarketing #austintexas #usa #freelance #techinvento (at AustinTX) https://www.instagram.com/p/B8iNThcH2Hx/?igshid=bz4sbbnffdu3
In a previous article, I talked about CSS preprocessors and how they can be more helpful instead of using just plain old CSS. And although I had recommended SASS instead of LESS, I have received requests for tutorials in both as some of our readers want to test each preprocessor out and decide for themselves. So today, I shall be focusing on LESS (I’ll cover SASS in another post in the future).
Okay, let’s get the party.. I mean tutorial started..
LESS INSTALLATION
I used Node.js’ NPM to install LESS. It’s actually very simple.
This will add LESS to your project folder. You can also use NPM to install LESS globally. Just add “sudo” and “-g” on your prompt, easy peasy lemon squeezey.
Once installed, check your project folder (my project is called html5_c) for a folder called “node_modules.” In it you’ll find a “less” folder holding all the needed files for awesomeness.
Take note though: this is only for when you add LESS to a particular project. You won’t find this if you install LESS globally.
PROJECT APPLICATION
Start by creating a file with a “.less” extension.
Next, add your LESS code to the file. Try playing with your code. You can start with color palettes, using variables such as this:
Variables in LESS start with “@”. Instead of using the color hex, use variables for better naming convention.
The general idea with using LESS and other CSS preprocessors is to write cleaner code then compiling these to create the needed CSS files. You will be able to create more readable, easier-to-maintain stylesheets.
Take this CSS file for example:
We have this <div> with an id called sidebar. Under #sidebar, there’s a ul with an li under it, with a “hover” attribute called a.
If we write this in LESS instead of CSS, here’s how it might look:
See the difference? It’s NESTED!!! ...making it way easier to understand.
Another cool thing about CSS Preprocessors is the “MIXIN”. The term itself, “mix”, signifies mixing up classes to acquire certain attributes.
Take this CSS example:
Since some elements have the same attributes, mixins slashes through that, thereby minimizing confusion and lines of code.
Here’s the LESS code for the above CSS:
A class called “top-footer-tab” holds the attribute for an element with an id of “next_meeting” and “span-1″ ...Who needs to copy-paste code when you can reuse?
GENERATING THE CSS FILES
Done writing your LESS files? Here’s how to compile these to CSS...
Whoa, that’s it?? Easy, right?
Nooo. It’s actually a bit tedious if you consider how every change you make in your LESS files will not take effect in your CSS files unless you run this command.
There is a way to solve this weakness though: by using TASK RUNNERS! (will give a separate tutorial on these too, soon!)
But as far as LESS is concerned, I encourage you to try it and I’ll give you a tap on the back *tap tap* for reaching the end of this simple tutorial.
