LESS CSS – Making your style sheets simpler! | Webby Blog - Insights to get the best from email marketing campaigns

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.

About
Latest Posts

Webby Monks

Webby Monks, a sister concern effort of Email Monks, offers a great deal of PSD to interactive HTML conversion services blended with interactive library of 100+ interactive components enabling clients to pick and choose best interactive components while placing a PSD to HTML conversion order. Some of our USPs include quick turnaround time, W3C validated end product, robust technological competency, 100 % money back guarantee like Email Monks, 100% hand coded HTML, multi-browser compatibility, clean and commended markups and comprehensive workflows.