【前端框架學習筆記】LessCSS(1):基本安裝與使用

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增加了變量、Mixin、函數等特性,使 CSS 更易維護和擴展。

Less 可以運行在 Node 或瀏覽器端。

*Less的作者把原生CSS稱為“vanilla CSS”。


我認為Less最大的優點就是減少了許多重復的css代碼。


專門的編譯工具:http://koala-app.com/index-zh.html(可通過該工具自行創建less文件(后綴名為 .less),無需安裝node.js。教程:http://blog.csdn.net/u011250873/article/details/45917519)


通過終端安裝(for Mac):


安裝過node.js后,打開終端,輸入以下命令進行下載&安裝:

npm install -g less

(如果有安裝國內的cnpm的話,可以把npm改為cnpm。下載安裝的速度更快。雖然不知道會有什么風險就是了)

安裝完畢后,輸入以下代碼調用less編譯器,并輸出編譯之后的 CSS 代碼到名為mystyles的css文件(沒有的話就會創建)

lessc styles.less > /項目路徑/mystyles.css

(Mac可以直接將項目文件夾拖到終端,終端會顯示該文件夾的具體路徑)


開始使用(也就是coding部分):


在head標簽內依次加入以下2個標簽:

1. <link rel="stylesheet/less" type="text/css" href="styles.less" />

2. 下載less.js并解壓,在dist找到less.js,復制粘貼到項目文件夾下,并在script標簽內引入:

<script src="less.js" type="text/javascript"></script>




接著就是根據less的語法正常書寫代碼了。待續。


--------

Ref:

http://less.bootcss.com/

http://www.imooc.com/video/4825

http://www.imooc.com/video/4827


免責聲明:http://www.lxweimin.com/p/cd9793098eea

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前些日子從@張鑫旭微博處得一份推薦(Front-end-tutorial),號稱最全的資源教程-前端涉及的所有知識...
    谷子多閱讀 4,267評論 0 44
  • 需要記住的實在太多了,書籍、手冊、指南上都是需要記憶的,尤其是其中很多對個人而言是相當陌生的時候,記憶能力卻很是有...
    五點砍柴閱讀 232評論 0 0
  • 為什么需要刻意練習:練習的目的是將動作變得熟練,自信。 例如:我們打籃球、打字、說話。都是需要刻意練習去將我們的動...
    邱凱閱讀 408評論 0 0
  • 床上,背靠填充木板,再后是簡易窗簾。左臂倚枕,右手持風。窗外有雨,四周漆黑。 許是天氣的緣故,近日沖動、易怒。新...
    是春山閱讀 234評論 0 0
  • 為了讓歸檔的文件更好地發揮作用,在歸檔的目錄上,應該包括復盤的時間、事件、參與人員、得出的規律等基本信息。如果進一...
    再見彼岸花閱讀 141評論 0 0