Digital agencies' best practices about modern web development, digital and inbound marketing.
LESS CSS – Making your style sheets simpler!
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 CSS 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.
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 CSS in your web page
- Using LESS is easy:
- 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)
- WordPress SEO: A Practical & Extensive Guide for 2019 - February 11, 2019
- A Comprehensive Guide To Performing UX Audit For Maximum Online Success - August 23, 2016
- Website sliders: Loved & hated, Still Omnipresent! - August 5, 2016