CSS「反轉」爲LESS

LESS（官網在此：http://lesscss.net/）的魅力相信你們都已明瞭，我的認爲它最大的魅力在於可以清晰的展示嵌套關係。

針對現有的項目，它的應用難點主要在於——

• 什麼時候轉換爲css，便是否利於開發調試、是否利於一鍵部署

• 現有項目是基於css的，如何很好的將css轉換成less，進而之後維護less便可

第一個問題，咱們藉助winLess這樣的轉換工具便可（http://winless.org/），固然這樣的工具還有其餘不少（如koala，它還支持compass、coffeescript、sass的轉換，官網在此koala），你們本身挑選喜歡的便可。

這裏主要來解決第二個問題，咱們知道了less的優點，想要完美的將css轉換爲less，達到過渡使用less進行編碼的效果。

css2less使用

先來嚐嚐鮮，訪問線上css2less轉換工具網址：http://css2less.cc/——

下面，咱們來搭建本地環境（等同於遠程linux的css2less環境的搭建）的css2less。因爲這個庫是基於ruby去作的，所以，咱們先安裝ruby。其下載地址：https://www.ruby-lang.org/en/downloads/，安裝完以後，配置環境變量

個人電腦->屬性->高級->環境變量，新建RUBY_HOME，值爲D:[Ruby Root]\ruby，而後在Path變量值最後追加;%RUBY_HOME%\bin，保存便可。

鍵入ruby -v，呈現——

鍵入gem -v，呈現——

Gem是一個管理Ruby庫和程序的標準包，它經過Ruby Gem（如http://rubygems.org/）源來查找、安裝、升級和卸載軟件包，很是的便捷。 Ruby1.9.2版本默認已安裝Ruby Gem，若是你使用其它發行版本，請參考「如何安裝RubyGem」

接下來，即是安裝css2less了，運行——gem install css2less

全部的gem包，會被安裝到/[Ruby root]/lib/ruby/gems/[ver]/目錄下，這其中包括了Cache、doc、gems、specifications 4個目錄，cache下放置下載的原生gem包，gems下則放置的是解壓過的gem包。

OK，咱們安裝完了css2less了，立刻就能夠用它了。它的命令模板——

css2less src_file.css > desc_file.less

看到的效果——

總結

介紹完畢css2less的使用了，惋惜的一點，它並不支持批量轉換（和圖片壓縮工具jpegtran同樣，僅僅支持單文件的處理）。

最後，鏈入css2less的github地址——https://github.com/thomaspierson/libcss2less

https://github.com/nicooprat/Css2Less這個裏面同時也介紹了 Css2Sass, Js2Coffee和Html2Haml，相信想用的人必然會對它們愛不釋手的。