[TOC] # Less less是一種css 的預處理語言，簡化了css的書寫，增強了css的功能，賦予css動態語言的特點，是css的升級版 LESS官網：[http://lesscss.org/](http://lesscss.org/) LESS中文網 ： [http://www.lesscss.cn/](http://www.lesscss.cn/) [http://www.lesscss.net/](http://www.lesscss.net/) # 前言 在使用less時，需要借助考拉工具進行編譯 ***** **可以在編譯成功的css中定位在less文件中的位置**  ***** **輸出方式** 默認輸出方式是normal,選擇compress輸出后會對代碼內容進行壓縮  ## 1.less嵌套格式 當兩個標簽描述的是同一個標簽。同時又不是父子關系 ```css div{ width: 100%; height: 40px; background-color: @base-color; //嵌套的寫法 a{ color:blue; &:hover{ color:red; } } } ul{ li{ background: #ccc; &.last{ background-color: pink; } } } ``` **加&符號書寫**  ## 2.定義變量 在樣式中有多個重復的屬性時，可以通過在less中設置變量的形式來減少對同一個屬性的書寫 使用**@ + 名字**來定義變量，以分號結束。 ``` //變量的定義 @base-color: pink; div{ width: 100%; height: 40px; background-color: @base-color; } button{ width: 60px; height: 30px; background-color: @base-color; } ``` ## 3.變量的使用 ### 3.1加法 可以通過使用加減乘除來操作變量 ``` @w:300px; @color1:green; @color2:red; //制作一個高永遠是寬度一半的盒子 div{ //width: @w - 100;//可以 //width: @w - 200px ;//可以 width: @w; height: @w/2; //background-color: @color1 + @color2; //可以 //background-color: @color1 + 15; // 可以 //background-color: @color1 + yellow; // 不可以 } ``` ### 3.2混合（類似于調用函數） ``` .zidingyi (@w,@h,@color:blue){/*沒有傳入實參，默認的實參值是blue*/ width: @w; height: @h; background: @color; } div{ .zidingyi(200px,250px,#f40) } p{ .zidingyi(150px,200px) } ```