less（二） less的變量和注釋

上篇中，我們簡單了解了less的使用環境和怎麼使用less;

下面我們了解一下less 的變量和注釋

less 的注釋

//這是第二種注釋

        上面的第一種注釋麻煩一點，但是當我們的less檔案編譯成css檔案後，css檔案中注釋依然存在；

         相反的第二種注釋簡單一點，但是編譯成css 檔案後，css 檔案中是沒有注釋的；

less 的變量

在前一篇中，我們已經使用了變量，但是沒有詳細說明，現在重新認識一下變量：

style.less檔案：

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd;

body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

//假設我們定義了div，那麼可以使用上面這個變量給div設定背景顔色 div{ background-color:@bg-color; }

從上面可以看出，定義一個變量使用 ：@變量名  ，例如  

@text-color: #ffccdd;

然後在其它的地方都可以使用這個@text-color 變量

上面定義的是顔色的變量的形式，下面看看帶機關的長度如何使用變量：（less檔案）

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: 100; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 div{ width: unit(@div-len,px); height: unit(@div-len,px); background-color:@div-bg; }

上面使用長度的時候，使用了 unit（） 這個函數，

下面看看其它的常用的函數

  ceil( )函數，向上取整；

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: 100.1; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 //使用ceil（） 函數，向上取整，把100.1變成101 div{ width: unit( ceil(@div-len),px); height: unit( ceil(@div-len),px); background-color:@div-bg; }

  floor函數 ，向下取整 ；

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: 100.1; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 //使用floor（） 函數，向下取整，把100.1變成100 div{ width: unit( floor(@div-len),px); height: unit( floor(@div-len),px); background-color:@div-bg; }

  round( )函數，四舍五入；

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: 100.1; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 //使用round（） 函數，四舍五入，把100.1變成100 div{ width: unit( round(@div-len),px); height: unit( round(@div-len),px); background-color:@div-bg; }

  percentage（）函數，百分比；

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: 0.5; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 //使用percentage（） 函數，百分比，把0.5 變成50% div{ width: percentage(@div-len); height: percentage(@div-len); background-color:@div-bg; }

  abs( )函數，絕對值；

//@bg-color 的意思是定義一個變量bg-color @bg-color: #ffccdd; @div-len: -100; @div-bg: #ff00dd;

// 變量之顔色的使用 body{ //設定背景顔色為上面的變量 background-color:@bg-color; }

// 變量的長度機關的使用 //使用unit（） 函數，第一個參數是上面我們定義的變量，第二個參數是機關 //使用abs（） 函數，取絕對值，把-100變成100 div{ width: unit( abs(@div-len),px); height: unit( abs(@div-len),px); background-color:@div-bg; }