less預編譯器易錯點

2021-09-24 07:53:56 字數 475 閱讀 1468

1.在less中只要設定了乙個樣式類,我們就可以把它稱之為乙個方法,其它地方需要用到這些樣式,直接「.[類名]」呼叫即可(原理:把當前樣式類中的**原封不動的copy乙份過去) 不加括號即是普通樣式類,也是封裝的乙個函式,編譯的時候,這個樣式類中的**依然跟著編譯 加括號僅僅是封裝的函式,編譯的時候是不編譯函式的

2.unit是less提供的方法,unit(value,'px'),給value設定單位,但是如果之前已經有單位了。此處是把原有單位去掉

2.less中定義變數用@,不用var,;變數名中可以有-,如@shadow-px;若想使用減法,則應當使用括號,如(@shadow-px)-20; 3.less中不能用"+ +"拼接字元,正確拼接應當是@,如圖

4.less中的繼承不是把當前樣式類中的**原封不動的copy乙份過去,而是讓當前的樣式類和繼承的樣式類公用一套樣式(編譯為群組選擇器的方式)

5.&符號代表父級選擇器之後緊跟著啥 6.@import用法

Vue手動整合less預編譯器

less是一門css預處理語言,簡單的說就是在css的基礎上提公升為可程式設計性的預編譯器 需要在專案中安裝 less less loader 2個外掛程式,語法為 npm i d less less loader 然後在 webpack.conf.js 檔案中進行如下配置 webpack.conf...

CSS預編譯器

sass 必須先安裝ruby,再安裝sassgem install sass less 先安裝npmnpm install g less less lessc styles.less lessc styles.less styles.css lessc clean css styles.less s...

stylus(css預編譯器)

推薦去張鑫旭大神這裡詳細了解 安裝npm install g stylus 自動編譯 stylus w demo.styl o dist demo.styl是styl檔案,dist是要生成樣式的目錄檔名,w 是自動監視檔案 o 是將編譯後的css檔案輸出到指定檔案中 壓縮stylus compres...