How do I keep my exiting CSS from compiled LESS


Tags: css,less,css-preprocessor

Problem :

I'm start using LESS in a project today and found a problem, lets describe this -

I always use predefined CSS Reset and as well as WordPress Core CSS along with my upcoming CSS in any project that I work on. The problem was not happened before I use LESS.

When I write new LESS code and compiled it through SimpLESS application or any other compiler, I just got my existing CSS (Reset, WP Core) code removed from my stylesheet (.css) and update the stylesheet with new CSS compiled code.

It's really annoying for me as I'm using LESS for the first time.

So, how to I keep my exiting CSS and the compiled CSS both at once?

Thanks in advance! :)



Solution :

Two options:

  1. Put your existing CSS in your LESS code. Your LESS code will overwrite your css file on every save, so you'll manage all of your styles with LESS.

  2. Change the name of your LESS file so you're not overwriting your existing CSS code, then put links to both stylesheets in your HTML document, or by putting this line in your LESS file:

    @import (css) "foo.css";
    

    CSS Howto..

    How to style only a sub-class with .css?

    How to set css for first div, if there's no second div

    How to navigate divs in a custom built single page app? [closed]

    How can I get the seletced filename from file button?

    How to select span element inside multiple div classes and id's?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to set css to more selectors when one of it is $(this)?

    With CSS, how do you unhighlight a link after clicking a different link?

    YUI Calendar: how does it load the Sam's Skin CSS?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    How can I apply CSS to an HTML text input?

    Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]

    Javascript - How to alter a property of a css class

    how to decrease the height of content area for

    with css?

    How to pivot image with CSS and Javascript

    how to tell org-mode to embed my css file on HTML export?

    ng-show/ng-hide breaking CSS animations

    CSS height as a variable and how to calculate 60% of total screen size

    Html, table, img & css - how to get text to wrap correctly?

    How to keep div visible when hovering another div

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    how could I make a textarea dynamically resize with the chrome app window?

    How to align columns in bootstrap to center?

    How to make a div fade on hover?

    How to check if Html element has a background-image css property in WebBrowser control C#

    how to place div next to centered div css

    How do I put a horizontal line/border right in the middle of a table row?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to replace cycle('float: left', 'float: right') to use pure css?

    How can I add padding to an element on my page?