less框架

最近剛學了CSS的一種新框架，感受在作大型網頁的時候頗有用。這種框架能夠再WebStorm中直接運行，或者可使用外接工具來執行，形式都同樣，只不過路徑不一樣。我的推薦用外接工具，我用的工具是koala。

首先介紹一下less的主要做用：在寫CSS的時候，咱們不免會遇到一些很麻煩的事，做爲一個程序員，不斷的重複一樣的代碼會顯得本身很白癡，less很好的幫咱們解決了這一問題，在Less中，咱們能夠直接定義一個對象，或者一段代碼，而後當寫到須要使用該數據或者語句的時候能夠直接調用。

具體用法：首先，建立一個.less文件，而後若是定義一個對象能夠這樣寫：@width:200px;首先‘@’必須有，表明的是定義一個對象，而後後面的是命名和具體數據，當咱們對其進行調用的時候，能夠直接這樣寫：#head{width:@width};這樣些的意思就是表明@width=200px，在後面若是有相同的數據的時候咱們就能夠不用寫200px，而是直接用@width來代替，而且這對於咱們進行後面的改數據也有很好的幫助，咱們能夠直接把@width:200px；改成@width:100px/300px...後面若是用到的都同樣改了，不用一個一個的找數據了。而後是對一段代碼的定義，具體寫法爲：.set-in(@width:200px;@height:200px){width:@width;height:@height;};首先，‘.’是必需要有的，當咱們再使用的時候能夠直接調用，例如：#dic{.set-in}。這樣就好了。還有一個用法也很叼，咱們在寫代碼的時候，爲了便於檢查和修改，要把每一個位置的關係都要寫的頗有結構性，例如在同一個div中，咱們在對div中的子元素進行描述時，必須不斷的重複#main_id這一句代碼，因此咱們就可使用less框架的另外一個很好的用法，能寫出頗有結構的代碼，例如：

<div id="main">

　　<div id="div1">

　　　　<p>less框架哪家強</p>　　

　　</div>

　　<div id="div2">

　　</div>

</div>

這段代碼中，咱們對main進行描述時，就要不斷的寫#main並且光從代碼中，咱們很難直觀看出其中的關係。在less中，咱們能夠直觀的表達出其中的關係：

#main{

　　width:xxx;

　　height:xxx;

　　#div1{

　　　　width:xxx;

　　　　height:xxx;

　　　　p{

　　　　　　color:xxx;

　　　　}

　　}

　　#div2{

　　　　width:xxx;

　　　　height:xxx;

　　}

}

這樣是否是頗有結構呢。固然less還有不少其餘強大的功能，可是我以爲，做爲一個前端工程師，學會這些也就差很少啦。

固然，當寫完這些代碼之後，若是WebStorm中沒有對應的插件是不能直接執行的，在WebStorm中要首先將其轉換成.css文件類型才能執行，而我使用的koala須要手動將less文件添加到其中將其轉換成css文件，而後再將其放入WebStorm中才能執行哦。