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這個里面同時也介紹了 Css2SassJs2CoffeeHtml2Haml,相信想用的人必然會對它們愛不釋手的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM