关于lesscss和颜色梯度（linear-gradient ）的一些问题 - tammy-yaoyao

一、什么是less？

一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数.

LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助Node.js).

二、什么是颜色梯度？

本人没有文化，正确地说线性梯度（-webkit-）linear-gradient 是gradient属性的一个分支。

————————————————————————

css3 ：linear-gradient 加油站：

http://dev.opera.com/articles/view/css3-linear-gradients/（opera）

https://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html(ms)

https://developer.mozilla.org/en/CSS/linear-gradient(moz)

http://www.webkit.org/blog/1424/css3-gradients/(webkit)

生成工具：http://westciv.com/tools/gradients/

三、less与 css gradient 相关的function：color function

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

lighten(@color, 10%); // return a color which is 10% _lighter_ than @color（减淡）

darken(@color, 10%); // return a color which is 10% _darker_ than @color（加深）

saturate(@color, 10%); // return a color 10% _more_ saturated than @color（+饱和度）

desaturate(@color, 10%); // return a color 10% _less_ saturated than @color（-饱和度）

fadein(@color, 10%); // return a color 10% _less_ transparent than @color（-透明度）

fadeout(@color, 10%); // return a color 10% _more_ transparent than @color（+透明度）

spin(@color, 10); // return a color with a 10 degree larger in hue than @color（……）

spin(@color, -10); // return a color with a 10 degree smaller hue than @color（）

http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive/attachment/less-css-8

四、预览效果：

preview

五、源代码：

.buttonbase(@bcolor:#ffffff,@border-radius:3px,@color:#FFFFFF){
    //background: @bcolor;
    background: -webkit-linear-gradient(@bcolor, darken(@bcolor,5%) 44%, darken(@bcolor,20%)) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(@bcolor, darken(@bcolor,5%) 44%, darken(@bcolor,20%)) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(@bcolor, darken(@bcolor,5%) 44%, darken(@bcolor,20%)) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(@bcolor, darken(@bcolor,5%) 44%, darken(@bcolor,20%)) repeat scroll 0 0 transparent;
    border-color: darken(@bcolor,22%) darken(@bcolor,30%) darken(@bcolor,18%);
    border-radius: @border-radius;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 0 lighten(@bcolor,10%) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
    color:@color;
    font-family: arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    padding: 6px 16px 7px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #4865E4;
        &:hover{
            background: -webkit-linear-gradient(lighten(@bcolor,1%), darken(@bcolor,4.5%) 44%, darken(@bcolor,21%)) repeat scroll 0 0 transparent;
            background: -moz-linear-gradient(lighten(@bcolor,1%), darken(@bcolor,4.5%) 44%, darken(@bcolor,21%)) repeat scroll 0 0 transparent;
            background: -o-linear-gradient(lighten(@bcolor,1%), darken(@bcolor,4.5%) 44%, darken(@bcolor,21%)) repeat scroll 0 0 transparent;
            background: -ms-linear-gradient(lighten(@bcolor,1%), darken(@bcolor,4.5%) 44%, darken(@bcolor,21%)) repeat scroll 0 0 transparent;
            border: 1px solid darken(@bcolor,21%);
            box-shadow: 0 1px 0 0 lighten(@bcolor,10%) inset, 0 1px 2px rgba(0, 0, 0, 0.3);

            &:active{
                background: -webkit-linear-gradient(@bcolor, darken(@bcolor,4.8%) 44%, darken(@bcolor,20.5%)) repeat scroll 0 0 transparent;
                background: -moz-linear-gradient(@bcolor, darken(@bcolor,4.8%) 44%, darken(@bcolor,20.5%)) repeat scroll 0 0 transparent;
                background: -ms-linear-gradient(@bcolor, darken(@bcolor,4.8%) 44%, darken(@bcolor,20.5%)) repeat scroll 0 0 transparent;
                background: -o-linear-gradient(@bcolor, darken(@bcolor,4.8%) 44%, darken(@bcolor,20.5%)) repeat scroll 0 0 transparent;
                border-color: darken(@bcolor,23%) darken(@bcolor,28%) darken(@bcolor,19%);
                border-left: 1px solid darken(@bcolor,25%);
                border-right: 1px solid darken(@bcolor,25%);
                border-style: solid;
                border-width: 1px;
                box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
            }
        }
    }

#green{
    .buttonbase(#83C260,3px,#FFFFFF);
}

#yellow {
    .buttonbase(#ffc40d,3px,#FFFFFF);
}

#blue {
    .buttonbase(#049cdb,3px,#FFFFFF);
}

#red {
    .buttonbase(#9d261d,3px,#FFFFFF);
}

#orange{
    .buttonbase(#f89406,3px,#FFFFFF);
}

#purple{
    .buttonbase(#7a43b6,3px,#FFFFFF);
}

代码阅读版：http://jsfiddle.net/Jf6Dg/

更加面向对象的版本(分离不需要重载的代码)：http://jsfiddle.net/Jf6Dg/2/

在线生成试一试：
http://less.cnodejs.net/

六、关于less的语法：

查看这里吧 http://www.lesscss.net/#docs

非原创，转自 https://blog.w3cub.com/blog/2012/02/28/less-and-linear-gradient/