什麼是Less？koala配置及使用

一、什麼是Less

　 css的Less好比是js的Jquery，可以讓人們更方遍快捷的使用css，使css代碼更簡潔，可以減少重複的代碼，減少開發人員的工作量。

　　Less CSS是一種動態樣式語言，屬於CSS預先處理語言的一種，它使用類似CSS的文法，為CSS賦予了動態語言的特性，如變數、繼承、運算、函數等，更方便CSS的編寫和維護。

　　Less中文手冊：less.bootcss.com

二、編譯工具

　　1.Koala：國人開發的LESS/SASS編譯工具

　　　下載地址：

　　2.Node.js庫

　　3.瀏覽器端使用

三、koala配置及使用

　　1.建立尾碼為.less檔案：index.less

　　　頭部寫上：@charset "utf-8"; 　　//設定字元集

　　2.把檔案夾拖到koala中，設定輸出路徑為style下的index.css

　　 使用koala進行編譯，然後就產生了一個index.css檔案。

　　3.之後我們只要編輯index.less檔案即可。

四、注釋

　　1./*編譯後會被保留*/

　　2.//編譯後不會被保留

五、變數

　　1.設定變數：

　　@text_width: 300px;

　　2.使用變數：樣本如下

　　<div class="box"></div>

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;
　　}

六、混合

　　1.混合簡介：與原有的在class中新追加class的方法有所不同（原有<div class="box border"></div>），使用Less的混合功能後，只要聲明.border後，在.box中加　　入.border;即可。

　　使用樣本一：

　　<div class="box"></div>

　　.box{
　　　　width: @text_width;
　　　　height: @text_width;
　　　　background: #000;

　　　　.border;
　　}

　　.border{

　　　　border: 5px solid yellow;

　　}

　　使用樣本二：新增一個box2，但是它和box1隻有一點點細微的區別，可以直接拿來box1使用，然後加上它自己的樣式。

　　.box2{

　　　　.box1;

　　　　margin-left: 100px;

　　}

　　2.混合是可以帶參數的

　　在index.less中使用帶參數的值，在border_02後面加一個（），裡面聲明一個變數；

　　然後傳入參數30px。

　　

　　在編譯後的index.css檔案中，帶參數的變數不顯示

　　

　　3.混合也可以帶預設值

　　在border_03後面加一個（），裡面聲明一個變數，變數後面附一個初始值“:10px”；

　　如果不想用預設值，只要在text_hunhe下的border_03的()中寫入值即可。

　　預設值必須帶（），不然會報錯。

　　

　　4.混合進階使用樣本，相容性也可以使用

　　<div class="radius_test"></div>

　　

　　在編譯後的index.css檔案中，展示如下

　　

七、匹配模式

　　1.簡介：相當於js中的if，但不完全是

　　2.樣本

　　先介紹一個畫倒三角的方法

　　<div class="sanjiao"></div>

　　.sanjiao{
　　　　width: 0;
　　　　height: 0;
　　　　overflow: hidden;
　　　　border-width: 10px;
　　　　border-color: red transparent transparent transparent;
　　　　border-style: solid dashed dashed dashed;
　　}

　　匹配模式樣本一：

　　.triangle(top,@w:5px,@c:#ccc){

　　　　border-width: @w;

　　　　border-color: @c transparent transparent transparent;

　　　　border-style: solid dashed dashed dashed;

　　}

　　.triangle(right,@w:5px,@c:#ccc){

　　　　border-width: @w;

　　　　border-color: transparent @c transparent transparent;

　　　　border-style: dashed solid dashed dashed;

　　}

　　.triangle(bottom,@w:5px,@c:#ccc){

　　　　border-width: @w;

　　　　border-color: transparent transparent @c transparent;

　　　　border-style: dashed dashed solid dashed;

　　}

　　.triangle(left,@w:5px,@c:#ccc){

　　　　border-width: @w;

　　　　border-color: transparent transparent transparent @c;

　　　　border-style: dashed dashed dashed solid;

　　}

　　.triangle(@_,@w:5px,@c:#ccc){　　　　// @_ 是固定格式，表示不管你匹配到誰，都會帶上這些內容

　　　　width: 0;
　　　　height: 0;
　　　　overflow: hidden;

　　}

　　.sanjiao{

　　　　.triangle(right,100px);

　　}

　　匹配模式樣本二：

　　匹配模式定位

　　.pos(r){position:relative;}
　　.pos(a){position:absolute;}
　　.pos(f){position:fixed;}
　　.posi{
　　　　width: 100px;
　　　　height: 100px;
　　　　background: blue;
　　　　.pos(r);
　　}

八、運算

　　1.less中的運算可以是任何數字、顏色、變數，運算要包裹在括弧中。如：+ - * /

　　2.樣本如下：

　　@test_01:300px;

　　.box_02{

　　　　width: (@test_01 - 20) * 5; 　　//未強制規定必須要帶px單位，只要有一個帶即可

　　　　color: #ccc - 10; //不太常用到

　　}

九、嵌套規則

　　1.樣本

　　　

　　原css　

　　.list{}
　　.list li{}
　　.list a{}
　　.list span{}

　　使用Less嵌套：

　　.list{
　　　　width: 600px;
　　　　margin: 30px auto;
　　　　padding: 0;
　　　　list-style: none;
　　　　font-size: 16px;　　　　li{

　　　　　　height: 30px;
　　　　　　line-height: 30px;
　　　　　　background: blue;
　　　　　　margin-bottom: 5px;
　　　　　　padding: 0 10px;
　　　　}
　　　　a{
　　　　　　float: left;
　　　　　　color: #000;

　　　　　　&:hover{　　　　//&代表上一層選取器

　　　　　　　　color: red;

　　　　　　}
　　　　}
　　　　span{
　　　　　　float: right;
　　　　}
　　}

十、arguments變數

　　.border_arg(@w:30px,@c:#ccc,@xx:solid){border:@arguments} //省了一點點事兒，懶人必備

　　.test_arguments{.border_arg(40px);}

十一、避免編譯、!important

　　1.避免編譯：在我們需要輸入一些不正確的css文法或者使用一些less不認識的專有文法時使用。在字串前加上一個~即可

　　.test_03{
　　　　width: ~'calc(300px - 30px)'; //~'...'避免編譯，把單引號裡的內容按照原樣傳給瀏覽器
　　}

　　2.!important關鍵字：適合用來調試，一般不會用到

　　.test_important{

　　　　.box !important;　　　　//給所有樣式加上!important

　　}