Geek Answers Handbook

How can I automatically back off LESS? (css extension)

Less , a CSS extension that allows you to embed CSS rules. I am looking for a way to automatically back out of my smaller code. I'm sure some combination of flags on indent will do the trick, but the man page is 23 pages.

+6
css indentation less beautifier
source share
2 answers

I really don’t understand what exactly you want, but after playing indented, I didn’t get any useful results. But I think www.prettyprinter.de will help you!

I reduced some LESS code

@brand-color:#fd4343;.border-radius(@radius:3px, @xxxx:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}body{color:@brand-color;font-size:14px;div#header{text-align:center;.border-radius(2px);div#nav{width:400px;}} div#content{color:#ffffff;.border-radius();}div#footer{.border-radius(5px);}}

and a pretty printer turned it into a normal and readable LESS back

 @brand-color:#fd4343; .border-radius(@radius:3px, @xxxx:5px){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } body{ color:@brand-color; font-size:14px; div#header{ text-align:center; .border-radius(2px); div#nav{ width:400px; } } div#content{ color:#ffffff; .border-radius(); } div#footer{ .border-radius(5px); } }

To do this, I checked the following checkboxes:

  • Add new lines after "{" and before "}"
  • Delete blank lines.
  • Add comment lines before the function.
  • Add new lines after ";"
  • Add new lines after "}" (for .css)

I hope I can help you.

PS sorry for bad english

+5
source share

I tried this one, but then found http://procssor.com/ , which is also free and has many interesting options:

Picture.png http://img827.imageshack.us/img827/2093/pictuream.png

And even great tips for each option:

Screenshot 2013-05-29 at 10.55.21 PM.png http://img822.imageshack.us/img822/4848/screenshot20130529at105.png

Hope this helps.

+1
source share

More articles:


All Articles