style-less

Parses LESS, beautifies LESS then writes LESS all using LESS.js

styleLess

Parses LESS, beautifies LESS then writes LESS all using LESS.js

Warning this is opinionated formatting, as it compresses lines that take up less than 81 chars into one line to be more concise.

.navbar {
  background-color: black;
  color: #fff;
  height: 23px;
  -moz-transition-duration: 1337ms;
  width: ~`@{document.body.clientWidth}`;
  @desired-menu-width: 950px;
 
  a:linka:visited { color: #dadada; }
 
  .nav-main {
    /* calls to mixins */
    .grid(24, 14);
 
    /* Inline mixin declarations */
    .right-separator() { border-right: 1px solid #949494; }
 
    /* Literal escaped values */
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=89)";
 
    /* Literal quoted values */
    font-family: "Trebuchet MS";
 
    li { &:first-child { margin: 0; } }
 
    > li.submenu > a:link, > li.submenu > a:visited {
      background: url('icons/arrow-down.png') 23px 23px no-repeat transparent;
      .right-separator;
    }
 
    // Keep Me 
    .preview-label { width: 100px; display: block; font-size: small; }
 
    li a:hoverli a:activeli.current a:link,
    li.current a:visitedli.submenu a:linkli.submenu a:visited {
      .menublock {
        @padding: 10px;
        opacity: 1;
        padding: @padding ((@desired-menu-width - (@padding * 10)) / 2);
      }
    }
  }
 
  /* 
   * Comments after rule
   */
}
 
/* Comments between root rules */
#main { .link { color: white; font-weight: bold; text-decoration: underline; } }
npm install style-less
style-less ugly.less > pretty.less
  • write a command line tool to make the above example work
  • more test coverage (maybe I am still missing something within the less.js spec)
  • options for formatting like, suppressing single-line compressions
  • shorten synopsis and try to include as much of the less spec as possible