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 ( 400px) {
        .one {
            font-size: 1.2em;
        }
    }

    @media ( 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;
    }

*/


//运算
//@ (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);
}