在學習less時發現網上雖然關於less的教程非常多,但是質量參差不齊看的人眼花繚亂,半天也不知所云,搞得整個人都不好了,浪費時間不說,還打擊了我們探索新知識的信心,對於這種不負責任亂寫教程誤人子弟的人,本人表示深深的鄙視,現在我就介紹一種最簡單高效學習less的方法,10分鐘即可掌握less核心用法,媽媽再也不用擔心我學不會less啦。
此神器可以自動將less檔案編譯的css檔案,徹底解放生產力(如果這步不會我建議你還是不要學習less)
新建less資料夾在資料夾中建立less檔案,格式為:main.less。用sublime 開啟如下圖:
開啟安裝好的koala,直接將剛才建立的less資料夾拖到koala中,就是醬紫:
在less資料夾中新建index.html,並引入main.css。
q:你個坑比,哪來的main.css,讓我去哪引入啊,破教程。
a:直接引入即可,koala會將main.less自動編譯為main.css
到此我們的前期準備工作就做好了,接下就是最激動人心的less學習環節了,是不是已經飢渴難耐了。
-----------------在main.less中敲入如下**----------------------
@color:pink;
body
//此時開啟index.html應看到粉色背景,說明已經引入成功,main.css是自動生成的不需要修改,是不是很簡單啊。
-------------------編譯後的main.css檔案為----------------------
body
這次來點高難度的,一開始不懂很正常,多敲幾遍就明白了。
-------------------在main.less中敲入如下**----------------------
#header p }
}}//html的標籤我就偷個懶不寫了,你自己加上就行了,開啟index.html可以檢視效果
-------------------編譯後的main.css檔案為----------------------
#header h1
#header
p #headerpa
#headerpa
:hover
-------------------在main.less中敲入如下**----------------------
@the-border:1px;
@base-color: #111;
@red: #842210;
#header
#footer
//不要複製貼上,沒有效果,一定要動手敲幾遍
-------------------編譯後的mian.css檔案為----------------------
#header
#footer
只要掌握了這三個核心,可以說基本上就掌握了less的常用方法,是不是超級簡單,當然這只是入門教程,關於less的更多高階用法還請進入官方**學習我是快樂的傳送門。 10分鐘 深入less
三種方式引用less 瀏覽器引用 less.js link type text lesss node中使用 工程中使用 變數 key value在js中,條件語句中 可以使用 if,else,switch定義,less中語句中跟switch中case比較像。less 沒有像js中這樣的關鍵字,但是也...
十分鐘入門less
1 變數 使用 可以定義less變數 bule eee 宣告變數 login container 2 混合 混合就是先定義乙個乙個樣式,然後在另外乙個樣式中使用 1 不帶引數 border login container 2 帶引數的混合 帶預設引數的混合 border border width 1...
10分鐘入門HTTP協議
所學習的協議版本是http 1.1 http是基於tcp的協議,所以可靠性是由傳輸層來保障的.在使用協議時,發出請求的是客戶端,接收請求的是服務端。所以在操作方面,http協議分為了2部分 request請求 response響應 uri uniform resourceidentifier 格式 ...