lesscap

Add LESSHat mixins to your LESS. Helpful if you are planning to convert your existing code to make use of LESSHat. Also known as the first CSS pre-preprocessor.

Installation

npm install -g lesscap

Usage

Command line

lesscap < ./input.less > output.less
lessc output.less > styles.css

Code

fs.createReadStream('input.less')
    .pipe(new LESSCap())
    .pipe(fs.createWriteStream('output.less');

Example

input.less input:

@import "./lesshat-prefixed";

body {
    font-size: 10px;
    keyframes: appearance, 0% { opacity: 0.5; } 100% { opacity: 1; };
    animation: appearance 2s ease;
}

a {
    color: blue;
    transition: color 1s ease;
    
    &:hover {
        color: lightblue;
    }
}

div {
    @gradient-colour: #3d6d1f;
    background-image: linear-gradient(to bottom, @gradient-colour 0%, saturate(@gradient-colour, 10%) 100%);
}

Will produce this output.less:

@import "./lesshat-prefixed";

body {
    font-size: 10px;
    .lh-keyframes(~'appearance, 0% { opacity: 0.5; } 100% { opacity: 1; }');
    .lh-animation(appearance 2s ease);
}

a {
    color: blue;
    .lh-transition(color 1s ease);
    
    &:hover {
        color: lightblue;
    }
}

div {
    @gradient-colour: #3d6d1f;
    .lh-background-image(linear-gradient(to bottom, @gradient-colour 0%, saturate(@gradient-colour, 10%) 100%));
}

Which will compile into this styles.css:

body {
  font-size: 10px;
  -webkit-animation: appearance 2s ease;
  -moz-animation: appearance 2s ease;
  -o-animation: appearance 2s ease;
  animation: appearance 2s ease;
}
body lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes appearance{ 0% { opacity: 0.5; } 100% { opacity: 1; }}
@-moz-keyframes appearance{ 0% { opacity: 0.5; } 100% { opacity: 1; }}
@-o-keyframes appearance{ 0% { opacity: 0.5; } 100% { opacity: 1; }}
@keyframes appearance{ 0% { opacity: 0.5; } 100% { opacity: 1; };
}
a {
  color: blue;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  -o-transition: color 1s ease;
  transition: color 1s ease;
}
a:hover {
  color: lightblue;
}
div {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzZDZkMWYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNiNzQxOCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #3d6d1f 0%, #3b7418 100%);
  background-image: -moz-linear-gradient(top, #3d6d1f 0%, #3b7418 100%);
  background-image: -o-linear-gradient(top, #3d6d1f 0%, #3b7418 100%);
  background-image: linear-gradient(to bottom, #3d6d1f 0%, #3b7418 100%);
}

Requirements

• Indent your style with tabs
• One property per line