Styling web pages to kill the monotonous nature of the web is the new trend. With the help of CSS, styling web pages has become really easy. It’s now possible to create a website’s look almost entirely in CSS, with minimal use of images. The main drawback here is that CSS stylesheets are becoming larger and complex to manage with more number of web pages and for developers it becomes messy to interpret a thousand line of code and rules.
To resolve this issue, there is a new offspring of dynamic stylesheet language LESS CSS that has come to limelight allowing you to write the stylesheets in more flexible way and then in turn converting the same into a regular CSS that a browser understands.
With LESS CSS you can streamline the CSS coding and save huge amount of time.
So, what is LESS and how to utilize it?
LESS is a dynamic stylesheet language which extends the standard syntax of CSS. You can create the LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it.
The standard LESS compiler is written in JavaScript, so you can just include it in your web pages along with your LESS stylesheet. The compiler then converts your LESS code into CSS on the fly when the browser loads the page. There are also compilers available in other languages, as we’ll see later.
LESS is easy to understand, install and use. It gives you lots of useful features, including:
- Variables and mixins, which let you create values and rules once, then reuse them throughout your stylesheet
- Nested rules — these can save you a lot of coding, and they make inheritance clearer
- Operators and functions, which let you create CSS properties mathematically
- Namespaces for grouping and encapsulating variables and mixins
… and lots more!
Installing LESS in your web page
- Using LESS is easy:
- Download the less.js JavaScript file from the LESS website.
- Save the file somewhere in your website, such as the document root.
- Write your LESS stylesheet and save it in a file called, for example, style.less in your document root.
Include less.js and your LESS stylesheet file in the head section of your web pages:
And, once instaled, the less.js script will run automatically the next time page loads converting your LESS stylesheet That’s it! When your page loads, the less.js script runs automatically, converting your LESS stylesheet rules to regular css when the browser processes the same.
Latest posts by Webby Monks (see all)
- A Comprehensive Guide To Performing UX Audit For Maximum Online Success - August 23, 2024
- Website sliders: Loved & hated, Still Omnipresent! - August 5, 2024
- Infographic: The Monk’s Pathway To Website Pre-Launch Nirvana - July 27, 2024