Less

@baseColor: red;

@switch: light; //dark





// according the first param to call class. 

.mixin (dark, @color) {

    color: darken(@color, 10%);

}



.mixin (light, @color) {

    color: @color;

}



.mixin (@_, @color) {

    display: block;

}

//end







//Guards begin

// can used  > >= = =< < ,  if @a is ture ,then  use --> .guards (@a) when (@a){} or .guards (@a) when (@a=true){} 

.guards (@a) when (lightness(@a) >= 50%) {

    background: gray;

}



.guards (@a) when (lightness(@a) < 50%) {

    background: blue;

}



//or

.mixin (@a) when (@a > 10), (@a < -10) { }



//and

.mixin (@a) when (@a > 10) and (@a < -10) { }



//compare

.max (@a, @b) when (@a > @b) { width: @a }

.max (@a, @b) when (@a < @b) { width: @b }



//value type

//can used function 

//iscolor

//isnumber

//isstring

//iskeyword

//isurl

.mixin (@a, @b: 0) when (isnumber(@b)) {  }

.mixin (@a, @b: black) when (iscolor(@b)) {  }



//not

.mixin (@b) when not (@b > 0) {  }



//Guards end





// @arguments 

.radius(@x: 0,@y: 0,@blur: 2px,@color: red) {

    -webkit-box-shadow: @arguments;

    box-shadow: @arguments;

}

//end



//nest 嵌套

body    { color:red;

    

          // The element  id equals b in body

    #b  {color:green;}



    #a  {   font-size:12px;



    &:hover{ font-size:15px}

    }

    

    }





//嵌套 Media Queries

.one{



    @media (width:400px){



        font-size:1.3em;

        

         @media print {

            color:red;

            }

        }

    }



/* then will output :



    @media (width: 400px) {

        .one {

            font-size: 1.2em;

        }

    }



    @media (width: 400px) and print and color {

        .one {

            color: blue;

        }

    }

    */

//end





//& 的高级用法



//1

.a,.b{

    .c &{

        color:white;

    }

      & + &{

        color:white;

    }

}

/*

    then output:

    .c .a,.c .b{

     color:white

    }





    .a + .a ,

    .a + .b ,

    .b + .b ,

     .b + .a{

        color:white;

    }



*/





//运算

//@width: (1px +5);

//@newWidth:(( @width +6 ) * 2 );



//命名空间



//定义

#bundle {

    .button () {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover { background-color: white }

    }

    .tab {  }

    .citation {  }

    }

//调用

#aa{

    #bundle >.button;

}



//namespace end



//作用域

//LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止



@var: red;



    #page {

        @var: white;

        #header {

            color: @var; // white

        }

    }



    #footer {

        color: @var; // red

    }



    // scope end







///////////////字符串插值//////////////////

@base-url: "http://www.baidu.com";

    #aaa{

        background-image: url("@{base-url}/images/bg.png");

    }

///////////////字符串插值结束//////////////////







/////////// 常用函数///////////////////////////

/*



escape(@string);                             // 通过 URL-encoding 编码字符串



unit(@dimension, [@unit: ""]);               // 移除或替换属性值的单位

color(@string);                              // 将字符串解析为颜色值



ceil(@number);                               // 向上取整

floor(@number);                              // 向下取整

percentage(@number);                         // 将浮点数转换为百分比，例如 0.5 -> 50%

round(number, [places: 0]);                  // 四舍五入取整



rgb(@r, @g, @b);                             // 转换为颜色值

rgba(@r, @g, @b, @a);                        // 转换为颜色值

argb(@color);                                // 创建 #AARRGGBB 格式的颜色值

hsl(@hue, @saturation, @lightness);          // 创建颜色值

hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值

hsv(@hue, @saturation, @value);              // 创建颜色值

hsva(@hue, @saturation, @value, @alpha);     // 创建颜色值



hue(@color);                                 // 从颜色值中提取 `hue` 值

saturation(@color);                          // 从颜色值中提取 `saturation` 值

lightness(@color);                           // 从颜色值中提取 'lightness' 值

red(@color);                                 // 从颜色值中提取 'red' 值

green(@color);                               // 从颜色值中提取 'green' 值

blue(@color);                                // 从颜色值中提取 'blue' 值

alpha(@color);                               // 从颜色值中提取 'alpha' 值

luma(@color);                                // 从颜色值中提取 'luma' 值



saturate(@color, 10%);                       // 饱和度增加 10%

desaturate(@color, 10%);                     // 饱和度降低 10%

lighten(@color, 10%);                        // 亮度增加 10%

darken(@color, 10%);                         // 亮度降低 10%

fadein(@color, 10%);                         // 透明度增加 10%

fadeout(@color, 10%);                        // 透明度降低 10%

fade(@color, 50%);                           // 设定透明度为 50%

spin(@color, 10);                            // 色相值增加 10

mix(@color1, @color2, [@weight: 50%]);       // 混合两种颜色

greyscale(@color);                           // 完全移除饱和度，输出灰色

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 

                                             // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor

                                             // 否则输出 @lightcolor



multiply(@color1, @color2);                 //分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色

screen(@color1, @color2);                   //与 multiply() 函数效果相反，输出结果是更亮的颜色。

overlay(@color1, @color2);                  //结合 multiply() 与 screen() 两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。注意：输出结果由第一个颜色参数决定。

softlight(@color1, @color2);                //与 overlay() 函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。

hardlight(@color1, @color2);                //与 overlay() 函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。

difference(@color1, @color2);               //从第一个颜色值中减去第二个（分别计算 RGB 三种颜色值），输出结果是更深的颜色。

exclusion(@color1, @color2);                //效果与 difference() 函数效果相似，只是输出结果差别更小 (lower contrast)。

average(@color1, @color2);                  //分别对 RGB 的三种颜色值取平均值，然后输出结果。

negation(@color1, @color2);                 //与 difference() 函数效果相反，输出结果是更亮的颜色。请注意：效果相反不代表做加法运算。

    

    

    */

















#a {

    height: 100px;

    width: 100px;

    .radius(3px,3px);

    .mixin(@switch,red);

    .guards(#999);

}