大家一起學習less 2:內建函數

來源:互聯網
上載者:User

內建函數的意思是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的看看

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.