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?
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
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
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 .
1 Answer 1
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.
- 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]
- 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.
How to put HTML, CSS and JS in one single file
So I have created a landing page for a client’s website. They apparenlty can’t upload the folder with the JS files, so they need all the JS and CSS in one same file. I started putting (before the body section) all the CSS putting it into and the JS putting in into , but all the animations inside the JS don’t work. Is there any way/advice on how to put it all together? Thanks! Ps: I could give more info if needed!
Welcome to SO! «I could give more info if needed«: looks like it is needed. Please make sure to provide an MCVE in your questions.
I doubt their inability to upload a folder to their hosting. I’d spend the time you’re wasting stuffing all the content in to a single file trying to upload the correct content structure instead
2 Answers 2
You just need to add a style section and a scripts section in the head
@Joel8bitar — it can actually go anywhere and modern browsers will do their thing and render it. In fact, if your script is very large and will delay rendering, it’ll be better after as it won’t impact the page load time. There’s also considerations if your script is manipulating the DOM, as the DOM elements need to exists at he moment the script is ran. You can handle this before the body using a document onload event, or after the body using an IIFE (Immediately Invoked Function Expression)
Is it possible to include one CSS file in another?
Just an fyi, doing this does not save an HTTP request. It just saves you from having to include the imported .css file somewhere else.
17 Answers 17
- The @import rule must precede all other rules (except @charset ).
- Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css .
Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the @import rule.
@import "mystyle.css"; @import url("mystyle.css"); The only caveat is that older web browsers will not support it. In fact, this is one of the CSS ‘hack’ to hide CSS styles from older browsers.
Refer to this list for browser support.
The @import url(«base.css»); works fine but bear in mind that every @import statement is a new request to the server. This might not be a problem for you, but when optimal performance is required you should avoid the @import .
If you aren’t minifying your css to one file then yeah you are correct but once it is then you are just calling one css file. Correct me if I’m wrong of course.
The CSS @import rule does just that. E.g.,
@import url('/css/common.css'); @import url('/css/colors.css'); In some cases it is possible using @import «file.css», and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
yes it is possible using @import and providing the path of css file e.g.
That is the best way to include a css stylesheet within a css stylesheet using css.
The «@import» rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
CSS File «main.css» Contains The Following Syntax:
@import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); To insert in style element use createTexNode don’t use innerHTML but:
Using two body in same CSS file
As far as the body selectors, they both apply to the same element, so only one can be used. If you want to change the style of body, change the existing selector’s properties. If you want to switch between the two based on some logic, give the element an ID or class and add that to the selectors so you can choose which one will apply.
ALso, screen2 and print2 aren’t valid media selectors.
Bit confused. I am trying to access this CSS using the class name page. If you don’t mind could you please elaborate it ?
Ok, here is the first bit. As @Adrian said, you can only have one body element for a page. Secondly, @media and @print corresponds to normal screens (such as desktop, laptop, and such) and prints (for examples, when you click on the print button) respectively. So, what you need to do is simple. Either put the body tag outside all the other media queries.
body < background-color:#ffffe0; margin-left:20px; margin-top:50px; margin-bottom:50px; >@media screen < .page<>rest of your styles and classes. > @media print < body < background-color:#ffffe0; margin-left:5px; margin-top:0px; margin-bottom:0px; >.page <> rest of your styles and classes. > and so on. @media screen < body < background-color:#ffffe0; margin-left:20px; margin-top:50px; margin-bottom:50px; >.page<> > @media print < body < background-color:#ffffe0; margin-left:5px; margin-top:0px; margin-bottom:0px; >.page <> > However, you should note that the print type css will only visible while you take a print out. It will not be visible on the main site display.