0

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?

Improve this question
6
  • Absolutely. LESS ultimately just compiles down to raw CSS anyway :) You may find this article on combining the two with gulp useful: ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css Commented Mar 13, 2017 at 20:48
  • to compile LESS into CSS are you using a build system such as grunt or gulp? if so you can concat the compiled LESS with the CSS in the output file Commented Mar 13, 2017 at 20:48
  • Not so far Brian McCall I haven't started coding the LESS yet, but will try that Commented Mar 13, 2017 at 20:50
  • 1
    It's a little unclear on how you're interpreting what LESS is. Less compiles into CSS. You can leave your "old" CSS alone and any new additions with LESS you would just add to the bottom of your "old" CSS file. To make this happen all you would have to do is rename your previous CSS file from style.css to style.less and then compile style.less to style.css. Commented Mar 13, 2017 at 20:50
  • @ObsidianAge thanks I'll take a look at that Commented Mar 13, 2017 at 20:51

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

you missed the key point here i think - CSS is also valid LESS, so when switching a css code base into less, you can just rename the files and start adding new styles using less features.
Yes that's true. In fact sometimes I convert existing CSS into LESS, and this is how I start. With the CSS file, which I name .less, set up the conversion process and then start "lessing" out the css file :)
Note, not all CSS is LESS compatiable. For instance .selector { calc(100px - var(--my-css-var)); } will not compile. You have to wrap that part with tilda double-quote like .selector { calc(~"100px - var(--my-css-var)"); } so sometimes, you can't just drop pure css into a less file and have it work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.