上一节:
下一节:

  Less 色彩操作函数

  • 定义和使用

    LESS提供了大量有用的操作函数，以不同的方式改变和操作颜色，并以相同的单位获取参数。
    LESS支持下表所示的一些颜色操作功能–
    序号 功能与说明 示例
    1
    Saturate
    它改变元素中颜色的强度或饱和度。
    background-color:saturate(hsl(80, 90%, 20%), 10%);
    它在CSS中编译，如下所示-
    background-color:#446600;
    2
    desaturate
    它降低元素中颜色的强度或饱和度。
    background-color:desaturate(hsl(80, 90%, 20%), 10%);
    它在CSS中编译，如下所示-
    background-color:#415c0a;
    3
    lighten
    它增加了元素中颜色的亮度。
    background-color:lighten(hsl(80, 90%, 20%), 10%);
    它在CSS中编译，如下所示-
    background-color:#639108;
    4
    darken
    它改变元素中颜色的强度或饱和度。
    background-color:darken(hsl(80, 90%, 20%), 10%);
    它在CSS中编译，如下所示-
    background-color:#213003;
    5
    fadein
    它会增加选定元素的不透明度。
    background-color:fadein(hsla(80, 90%, 20%,0.5), 10%);
    它在CSS中编译，如下所示-
    background-color:rgba(66, 97, 5, 0.6);
    6
    fadeout
    它降低了选定元素的不透明度。
    background-color:fadeout(hsla(80, 90%, 20%,0.5), 10%);
    它在CSS中编译，如下所示-
    background-color:rgba(66, 97, 5, 0.4);
    7
    fade
    它用于为选定元素设置颜色的透明度。
    background-color:fade(hsl(80, 90%, 20%), 10%);
    它在CSS中编译，如下所示-
    background-color:rgba(66, 97, 5, 0.1);
    8
    spin
    它用于旋转选定元素的颜色角度。
    background-color:spin(hsl(80, 90%, 20%), -10);
    它在CSS中编译，如下所示-
    background-color:#526105;
    9
    mix
    它混合了两种颜色和不透明性。
    background-color:mix(#b361b1, #acb148, 50%);
    它在CSS中编译，如下所示-
    background-color:#b0897d;
    10
    tint
    当你减少颜色的比例时，它会将颜色与白色混合。
    background-color:tint(rgba(66, 97, 5, 0.5),50%);
    它在CSS中编译，如下所示-
    background-color:rgba(208, 216, 193, 0.75);
    11
    shade
    当你减少颜色的比例时，它会将颜色与黑色混合
    background-color:shade(rgba(66, 97, 5, 0.5),50%);
    它在CSS中编译，如下所示-
    background-color:rgba(17, 24, 1, 0.75);
    12
    greyscale
    它将放弃选定元素中颜色的饱和度。
    background-color:greyscale(hsl(80, 90%, 20%));
    它在CSS中编译，如下所示-
    background-color:#333333;
    13
    contrast
    它设置元素中颜色的对比度。
    background-color:contrast(hsl(80, 90%, 20%), #81F79F, #01DFA5, 30%);
    它在CSS中编译，如下所示-
    background-color:#81F79F;
    想了解更多颜色的知识，请阅读我们的颜色教程
上一节:
下一节: