CODEWITHSUNDEEP
cssless
AndrewY
AndrewY

Reputation: 43

Combining LESS and CSS in same HTML

I can't seem to find an answer to this anywhere online.

I have already written all the CSS code for my site and don't have time to reformat it into LESS, however I've just discovered LESS and how it could be useful for certain functions. I want to edit forms on my html page with LESS for example, but everything else is fine with the CSS I've written. Is there any way to combine the two? Can I have CSS affecting certain parts of the HTML page and LESS affecting others if I load in 2 separate files?

Upvotes: 0

Views: 1191

Answers (1)

mayersdesign
mayersdesign

Reputation: 5310

You are understandably, but completely, confused as to what LESS actually is :) LESS "is" CSS. In so much as it's a document you write with all sorts of shortcuts, variables and functions which is then compiled (turned into) CSS.

So when you write LESS, you are writing CSS, but with a bunch of shorthand.

There are various methods of compiling the LESS into CSS, including winLess and (my choice) Grunt. I am sure there are others. The way I have Grunt setup it also mins (compresses) the CSS at the same time it compiles. It also compiles automatically, as you save the .less file.

Less is saved as a .less file. Once it is compiled into (well... "as") the .css file you should not, as a rule, edit that .css file... just edit the .less file from whence it came! (and recompile) :)

The take away here is that LESS is a CSS pre-processor language (there are others, notably SASS). A shorthand, and powerful, way to ultimately simply write CSS.

Some points:

  1. CSS is actually valid LESS. You can simply rename the CSS file to LESS, and compile it, and you will end up with a matching CSS file. (Then in the LESS file you can start taking advantages of "shorthand" features, all the file compiling into...still...the same CSS file. [suggested by @caesay]

  2. You would never actually include a LESS file into an html file. Remember LESS is only there to be compiled into a CSS file... which you do include.

Upvotes: 2

Related Questions