diff --git a/lib/less/functions.js b/lib/less/functions.js index b077123e6..f847b5e12 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -342,7 +342,39 @@ tree.functions = { }, shade: function(color, amount) { return this.mix(this.rgb(0, 0, 0), color, amount); + }, + + /* Shorthand Extraction */ + + top: function(n) { + return this._extractPadding('top', n); + }, + right: function(n) { + return this._extractPadding('right', n); + }, + bottom: function(n) { + return this._extractPadding('bottom', n); + }, + left: function(n) { + return this._extractPadding('left', n); + }, + _extractPadding: function(property, n) { + if (n instanceof tree.Dimension) { + return n; + } else if (n && typeof(n.length) === 'number') { + // Extract the padding property from the shorthand value: + var index = ['top', 'right', 'bottom', 'left'].indexOf(property); + if (n.length === 3 && index === 3) { + // left(1px 2px 3px) should return "2px"; this is the only case where the math would be complicated + return n[1]; + } else { + return n[index % n.length]; + } + } else { + throw { type: "Argument", message: "argument must be a Dimension" }; + } } + }; function hsla(color) { diff --git a/test/css/functions.css b/test/css/functions.css index bf612d4e5..0878c5d13 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -98,3 +98,21 @@ average: #7b007b; negation: #d73131; } +#padding-extraction { + top: 1px; + right: 2px; + bottom: 3px; + left: 4px; + top: 1px; + right: 2px; + bottom: 3px; + left: 2px; + top: 1px; + right: 2px; + bottom: 1px; + left: 2px; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; +} diff --git a/test/less/functions.less b/test/less/functions.less index 8b80cccc1..fe11fdf45 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -109,3 +109,33 @@ average: average(#f60000, #0000f6); negation: negation(#f60000, #313131); } + +#padding-extraction { + // Four: + @pad: 1px 2px 3px 4px; + top: top(@pad); + right: right(@pad); + bottom: bottom(@pad); + left: left(@pad); + + // Three: + @pad: 1px 2px 3px; + top: top(@pad); + right: right(@pad); + bottom: bottom(@pad); + left: left(@pad); + + // Two: + @pad: 1px 2px; + top: top(@pad); + right: right(@pad); + bottom: bottom(@pad); + left: left(@pad); + + // One: + @pad: 1px; + top: top(@pad); + right: right(@pad); + bottom: bottom(@pad); + left: left(@pad); +}