今天的less學習心得

官方網站：http://www.lesscss.net/#-pattern-matching-and-guard-expressions

檢查編譯本身的less代碼網站:http://less.cnodejs.net/#

先貼段代碼，等會兒在總結

@color:#f00;

body{
    #nev{
        background-color:@color*2;
    }
    a{
        font-size:12px;
        &:hover{
            font-size:14px;
        };
    }
    .h6(){
        border-radius:#fff;
    }
   pre{.h6()} 
}

//編譯後的代碼
body #nev {
  background-color: #ff0000;
}
body a {
  font-size: 12px;
}
body a:hover {
  font-size: 14px;
}
body pre {
  border-radius: #fff;
}

其實less很簡單，不須要解釋，看代碼就能懂了，只有那麼幾個功能，並且還和其它的語言有相同的地方。

一、局部變量

@color:#443311;
#header{
   color:@color;
}

//編譯後的css
#header {
  color: #443311;
}

二、混合（我的理解爲局部變量傳參也以爲能夠叫作方法定義）

.class(@radiu){
  border-radiu:@radiu;
}
pre{
  .class(5px);
}

//編譯後的代碼
pre {
  border-radiu: 5px;
}

三、嵌套

body{
    h3{
        color:#4400dd;
    }
    p{
        font-size:12px;
        
        .text{
            color:#555;
        }
    }
}

//編譯後的代碼
body h3 {
  color: #4400dd;
}
body p {
  font-size: 12px;
}
body p .text {
  color: #555;
}

四、函數與操做符

@color:#33ff00;
#headr{
  color:@color *3;
}

//編譯後的代碼
#headr {
  color: #99ff00;
}

五、函數重載（爲我的的理解）——Pattern-matching and Guard expressions

.mixin(red,@color){
    background-color:@color;
}
.mixin(blue,@color){
    background-color:@color;
}
.class{
    .mixin(red,"#f00");
}

//編譯後的代碼
.class {
  background-color: "#f00";
}

六、函數

這個比較多，就貼圖官方文檔的API了

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);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

仍是貼一個使用的例子

.mixin(dark,@color){
    color:darken(@color,10%);
}
.header{
    .mixin(dark,#f00);
}

//編譯後的代碼
.header {
  color: #cc0000;
}

七、&符號（串聯選擇器）

a{
    font-size:14px;
    &:hover{
        font-size:12px;
    }
}

//編譯後
a {
  font-size: 14px;
}
a:hover {
  font-size: 12px;
}

所謂的串聯選擇器，就是指把&符號裏的樣式，串連在父樣式上，並行

九、引入

通常是在一個mian.less中引入其餘的less

@import "less/myless"//引入的文件爲myless.less,其中能夠省略後墜，固然也能夠不用省略
@import "css/mycss.css"//引入外部的css文件

十、字符串插值

@url:"www.noin.cn";
background-image:url("@{url}/img/head.png");

//編譯後
background-image: url("www.noin.cn/img/head.png");

很好了，今天大體的less心得就寫這麼多吧，明天就要用一上午的時間看完coffeescript;這個也是一個神器啊...簡化js的語言，原本想要把 zonda的學習心得寫下來的，可是仍是以爲本身也就能寫一點皮毛，仍是請你們去官網看一下吧，其實安裝zonda我就裝nodejs都裝了2天還沒裝上，都以爲本身好笨哦。

加油！