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);
}