Adds range() function for lists (#3334)

Author: matthew-dean

lib/less/functions/list.js

@@ -1,6 +1,7 @@
 var Comment = require('../tree/comment'),
     Dimension = require('../tree/dimension'),
     Declaration = require('../tree/declaration'),
+    Expression = require('../tree/expression'),
     Ruleset = require('../tree/ruleset'),
     Selector = require('../tree/selector'),
     Element = require('../tree/element'),
@@ -27,6 +28,34 @@ functionRegistry.addMultiple({
     length: function(values) {
         return new Dimension(getItemsFromNode(values).length);
     },
+    /**
+     * Creates a Less list of incremental values.
+     * Modeled after Lodash's range function, also exists natively in PHP
+     * 
+     * @param {Dimension} [start=1]
+     * @param {Dimension} end  - e.g. 10 or 10px - unit is added to output
+     * @param {Dimension} [step=1] 
+     */
+    range: function(start, end, step) {
+        var from, to, stepValue = 1, list = [];
+        if (end) {
+            to = end;
+            from = start.value;
+            if (step) {
+                stepValue = step.value;
+            }
+        }
+        else {
+            from = 1;
+            to = start;
+        }
+
+        for (var i = from; i <= to.value; i += stepValue) {
+            list.push(new Dimension(i, to.unit));
+        }
+
+        return new Expression(list);
+    },
     each: function(list, rs) {
         var rules = [], newRules, iterator;
 

test/css/functions-each.css

@@ -40,6 +40,30 @@
   val2: 2;
   val3: 4;
 }
+.column-list {
+  list: 1 2 3 4;
+}
+.col-1 {
+  width: 25%;
+}
+.col-2 {
+  width: 25%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-4 {
+  width: 25%;
+}
+.row-1 {
+  width: 10px;
+}
+.row-2 {
+  width: 20px;
+}
+.row-3 {
+  width: 30px;
+}
 .box {
   -less-log: a;
   -less-log: b;

test/less/functions-each.less

@@ -76,6 +76,23 @@ each(@selectors, {
   });
 }
 
+@columns: range(4);
+.column-list {
+  list: @columns;
+}
+
+each(@columns, .(@val) {
+  .col-@{val} {
+    width: (100% / length(@columns));
+  }
+});
+
+each(range(10px, 30px, 10px), .(@val, @index) {
+  .row-@{index} {
+    width: @val;
+  }
+});
+
 @list: a b c d;
 .box {
   each(@list, {