Convert LESS nested CSS to standard CSS

问题

I need help trying to convert this LESS nested CSS to standard CSS. Can anybody help?

.leftNav {
    a.TopLevel {
        float:none;
    }

    ul#topnav {
        > li {
            float:none;
            height: 2em;
            margin: 2px;
            background-color: rgb(1,64,117);
            border: 1px solid rgb(1,64,117);

                color: #fff;
            border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, rgb(30,94,147)),  color-stop(0.99, rgb(1,64,117)) );
            background: -moz-linear-gradient(center top,  rgb(30,94,147) 3%, rgb(1,64,117) 99% );
        }

        > li .sub {
            left:120px;
            top: 0px;
        }

        > li > h2 > a {
            color: #fff;
        }

        > li:hover > h2 > a, > li > h2 > a:hover, li > h2 > a:focus, a.TopLevel.active, a.TopLevel.active:hover {
            background-position: top left;
            color: #bbb;
        }

        li:hover {

        }
    }

    #topNavContainer {
        position:absolute;
        left: 17px;
        top: 100px;
    }

    .headertable, .wrapper {
        margin-left: 120px;
    }
}

回答1:

you can also use lessphp or less.js.

Pekka is right. If you have a LESS style(s) (*.less file), it is also thought that you have a LESS-parser (original ruby gem or one of the PHP-Classes or even the less.js JavaScript lib) and its primary purpose is to parse (convert) LESS to CSS.

UPDATE

• WinLESS - (Windows) pretty simple GUI. It looks like it uses less.js somehow (my personal choise)
• SimpleLESS - (Multiplarform) another GUI. Work also pretty well
• LessAPP - (Mac) I think it is one of the first Desktop-Tool for comiping *.less Kind of Grandfather of WinLESS and SinpleLESS

There're many other tools...for Mac, for Win and Multi

回答2:

The whole point of LESS is that you write the LESS-style CSS, and the LESS interpreter converts it to normal CSS.

So just run your LESS code through LESS, and you'll get the equivalent normal CSS.

Simple.

回答3:

using firebug, in the CSS tab, you can see what is the generated result in css using LESS.

回答4:

You could use LessJS Converter

回答5:

Check Convert Less to CSS with Simpless

SimpLESS is your easy-to-use LESS CSS compiler.

Hopefully it will help you a lot..

回答6:

This is the easiest way to use Less:

1. Create style.css file
2. Create style.less file

3. In index.php link to those file:

   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet/less" type="text/css" href="style.less">
   

   Notice that to link to less you should end the rel="" with /less:

   rel="stylesheet/less".
   

4. download http://winless.org/

5. Drag your project folder to this program and it'll convert your less file to css.

来源：https://stackoverflow.com/questions/4896500/convert-less-nested-css-to-standard-css