Split variables into separate file and put all less files in a folder.

Author: stefandroog

Gruntfile.js

@@ -16,7 +16,7 @@ module.exports = function(grunt) {
     less: {
       jgrowl: {
         files: {
-          "jquery.jgrowl.css": "jquery.jgrowl.less"
+          "jquery.jgrowl.css": "less/jgrowl.less"
         }
       }
     },

jquery.jgrowl.css

@@ -2,7 +2,7 @@
   z-index: 9999;
   color: #ffffff;
   font-size: 12px;
-  font-family: Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: Verdana, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: fixed;
 }
 .jGrowl.top-left {

jquery.jgrowl.map

@@ -1,18 +1,9 @@
 
-@width:					235px;
-@height:				40px;
-@backgroundColor: 		#000;
-@color: 				#fff;
-@fontSize: 				12px;
-@fontFamily: 			Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
-@opacity:				.85;
-
-
 .jGrowl {
 	z-index: 			9999;
-	color: 				@color;
-	font-size: 			@fontSize;
-	font-family:		@fontFamily;
+	color: 				@jgrowl-color;
+	font-size: 			@jgrowl-fontSize;
+	font-family:		@jgrowl-fontFamily;
 	position:			fixed;
 
 
@@ -49,13 +40,13 @@
 	}
 
 	.notification() {
-		background-color: 		@backgroundColor;
-		opacity: 				@opacity;
+		background-color: 		@jgrowl-backgroundColor;
+		opacity: 				@jgrowl-opacity;
 		// These are for older versions of Internet Explorer that don't support opacity
-		-ms-filter: 			progid:DXImageTransform.Microsoft.Alpha(Opacity=(@opacity*100)); 
-		filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=(@opacity*100)); 
+		-ms-filter: 			progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));
+		filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));
 		zoom: 					1;
-		width: 					@width;
+		width: 					@jgrowl-width;
 		padding: 				10px;
 		margin:					10px;
 		text-align: 			left;
@@ -65,7 +56,7 @@
 
 	.jGrowl-notification {
 		.notification;
-		min-height: 			@height;
+		min-height: 			@jgrowl-height;
 
 		.jGrowl-header {
 			font-weight: 			bold;

jquery.jgrowl.min.css

@@ -0,0 +1,2 @@
+@import "jgrowl.variables.less";
+@import "jgrowl.core.less";

jquery.jgrowl.less less/jgrowl.core.lessjquery.jgrowl.less renamed to less/jgrowl.core.less

@@ -0,0 +1,7 @@
+@jgrowl-width:			  235px;
+@jgrowl-height:			  40px;
+@jgrowl-backgroundColor:  #000;
+@jgrowl-color: 			  #fff;
+@jgrowl-fontSize: 		  12px;
+@jgrowl-fontFamily: 	  Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+@jgrowl-opacity:		  .85;