Less10分鐘入門

2021-07-11 12:51:51 字數 1697 閱讀 7540

在學習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 格式 ...