內建函數的意思是less自身準備的一套函數,可以讓你直接在less文本中直接使用,它們90%是與顏色相關的。從源碼可以看到,它們都掛在less.tree.functions之下:
rgbrgbahslhslahuesaturationlightnessalphasaturatedesaturatelightendarkenfadeinfadeoutfadespinmixgreyscaleeescape%roundceilfloor_mathargbpercentagecoloriscolorisnumberisstringiskeywordisurlispixelispercentageisem_isa
下面是我對這些方法的一些理解
tree.functions = { rgba: function (r, g, b, a) { //返回一個tree.Color 執行個體 //https://github.com/cloudhead/less.js/blob/master/lib/less/tree/color.js }, rgb: function (r, g, b) { return this.rgba(r, g, b, 1.0); }, hsl: function (h, s, l) { return this.hsla(h, s, l, 1.0); }, hsla: function (h, s, l, a) { //內部調用rgba }, hue: function (color) { //傳入一個tree.Color執行個體,返回它的色相 //http://en.wikipedia.org/wiki/Hue return new(tree.Dimension)(Math.round(color.toHSL().h)); }, saturation: function (color) { //傳入一個tree.Color執行個體,返回它的飽和度 //http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html return new(tree.Dimension)(Math.round(color.toHSL().s * 100), '%'); }, lightness: function (color) { //傳入一個tree.Color執行個體,返回它的亮度 //http://msdn.microsoft.com/en-us/library/ie/aa358801(v=vs.85).aspx //http://en.wikipedia.org/wiki/Lightness return new(tree.Dimension)(Math.round(color.toHSL().l * 100), '%'); }, red: function (color) { //傳入一個tree.Color執行個體,返回它的red值,一個顏色是由紅綠藍這三原色組成,外加透明度 return new(tree.Dimension)(color.rgb[0]); }, green: function (color) { //傳入一個tree.Color執行個體,返回它的green值 return new(tree.Dimension)(color.rgb[1]); }, blue: function (color) { //傳入一個tree.Color執行個體,返回它的blue值 return new(tree.Dimension)(color.rgb[2]); }, alpha: function (color) { //傳入一個tree.Color執行個體,返回它的透明度 return new(tree.Dimension)(color.toHSL().a); }, //上面hue,saturation,lightness,red,green,alpha是用於取得顏色值的具體屬性值的 luma: function (color) { /*返回一個與當前傳入的顏色值對比比較強烈的顏色This adds a contrast function that given an existing colour, returns a contrasting colour value, either black/white, or other configurable light/dark values, and the threshold at which the colour choice is made is configurable too.Cases where you might want to use this:ensuring text contrasts with a given background colourensuring background contrasts with a given text colourensuring borders contrast with backgroundensuring links contrast with normal textbuilding gradients with sufficient colour range這形成了對比函數,給出一個現有的色彩,返回一個對比顏色值,要麼黑/白,或其他可配置的光/暗值,和的門檻,顏色的選擇也是可配置的。情況下,您可能想要使用這個:確保文本與給定的背景顏色確保背景與給定的文本顏色確保邊界與背景相比確保與正常文本連結的對比建立具有足夠的色彩範圍漸層https://github.com/cloudhead/less.js/pull/730 */ }, saturate: function (color, amount) { // 增加飽和度,第二個參數為百分數,內部調用hsla }, desaturate: function (color, amount) { // 減小飽和度,第二個參數為百分數,內部調用hsla }, lighten: function (color, amount) { // 變淡一點,第二個參數為百分數,內部調用hsla }, darken: function (color, amount) { // 變暗一點,第二個參數為百分數,內部調用hsla }, fadein: function (color, amount) { //通過改變透明度,讓它顯示出來 }, fadeout: function (color, amount) { //通過改變透明度,讓它隱褪 }, fade: function (color, amount) { //通過改變透明度 }, spin: function (color, amount) { //在color的hue 中增加或減少amount值,amount為數值 }, // // Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein // http://sass-lang.com // mix: function (color1, color2, weight) { //將兩個顏色合并成一個新的顏色 }, greyscale: function (color) { //減少使用中色彩的灰階 return this.desaturate(color, new(tree.Dimension)(100)); }, contrast: function (color, dark, light, threshold) { if (typeof light === 'undefined') { light = this.rgba(255, 255, 255, 1.0); } if (typeof dark === 'undefined') { dark = this.rgba(0, 0, 0, 1.0); } if (typeof threshold === 'undefined') { threshold = 0.43; } else { threshold = threshold.value; } if (((0.2126 * (color.rgb[0]/255) + 0.7152 * (color.rgb[1]/255) + 0.0722 * (color.rgb[2]/255)) * color.alpha) less官網的文檔很不全啊,只能參照sass的看看