Well formed CSS to LESS

Question

As a UX designer I am trying to optimize my work flow. I want to go from HTML to well formed CSS to LESS as quick as I can. The idea: Post your HTML, generate CSS, compile TO less, add the properties for style, and THEN recompile to CSS for deployment.

HTML:

<header>
   <nav>
     <ul>
       <li><a></a></li>
       <li><a></a></li>
       <li><a></a></li>
     </ul>
   </nav>
<header>

Outputted CSS using http://lab.xms.pl/css-generator/

header {  }
header nav {  }
header nav ul {  }
header nav ul li {  }
header nav ul li a {  }

Then the LESS version is built with some kind of compiler (THIS IS WHAT I NEED)

header{
**declarations**
  nav{
  **declarations**
    ul{
    **declarations**        
      li{
      **declarations**
        a{
         **declarations**
         }
        }
       }
      }
     }

Finally recompile to normal CSS when development is finished and ready to deploy with a tool such as http://wearekiss.com/simpless (just an example I'm sure there are plenty of tools like this)

I do realize there are things to consider such as mixins vs concatenating rules with tools like Cleancss but nesting is the biggest concern for me as repeating specificity rules over and over again is the most gruesome to build/look at.

To clean out unused CSS we could use unused-css (dot) com or a similar tool.

Does anyone have a tool for accomplishing such as task? Would anyone be interested in building this?

Thoughts-suggestions-meetups w/e are welcome. Automating just this task at least could really lift alot of us to the next level, so please don't write if off, consider carefully what I'm suggesting before yelling "REWRITE IT" "TOUGH IT OUT" etc

Thanks in advance and hope to hear some good input.

Answer 1

The PHP implementation of the LESS preprocessor has a tool called Lessify. You can download it from the project's git repo or give it a go online . I hope this is what you needed.