lesscap v0.0.5

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