diff --git a/lib/less/functions/list.js b/lib/less/functions/list.js index 9cfd61f23..37acad4a4 100644 --- a/lib/less/functions/list.js +++ b/lib/less/functions/list.js @@ -1,5 +1,6 @@ var Dimension = require('../tree/dimension'), Declaration = require('../tree/declaration'), + Expression = require('../tree/expression'), Ruleset = require('../tree/ruleset'), Selector = require('../tree/selector'), Element = require('../tree/element'), @@ -26,6 +27,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 i = 0, rules = [], newRules, iterator; diff --git a/test/css/functions-each.css b/test/css/functions-each.css index 4d9bb9786..745b6aec1 100644 --- a/test/css/functions-each.css +++ b/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; diff --git a/test/less/functions-each.less b/test/less/functions-each.less index eebaf1b05..ef9f0688a 100644 --- a/test/less/functions-each.less +++ b/test/less/functions-each.less @@ -73,6 +73,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, {