前端技術(shù)眾多,作為一名前端工程師,我們每接觸新技術(shù)首先要懂得此技術(shù)的優(yōu)勢和劣勢,這是最基本的。往深入了說還需要懂得技術(shù)的應(yīng)用場景,與之配合的技術(shù)等,方便為以后架構(gòu)做準(zhǔn)備。而less作為一門CSS預(yù)處理語言,擁有函數(shù)式變成的特點(diǎn),主要優(yōu)點(diǎn)就是高效。主要適用于包含眾多CSS的大型項(xiàng)目。主要體現(xiàn)在:項(xiàng)目公共樣式的定義,如頁面主色、固定數(shù)值(寬、高、時(shí)間等)、公用樣式模板、封裝省略瀏覽器兼容前綴的函數(shù)等。
1.less的兩種使用方式
1.1 直接調(diào)用需要引入less.js,和less樣式文件,需要注意的是rel需要指定為stylesheet\less。此方式也是在瀏覽器內(nèi)部最終將less中的樣式轉(zhuǎn)換成css樣式之后調(diào)用。因頁面加載時(shí)資源請求較多,故不推薦此方法。
<link rel="stylesheet/less" href="./lessTest.less"/> <script src="./less.js"></script>
1.2 將less文件編譯為css文件后引入,博主使用的是考拉工具,大家可以自行百度。
less語法(本文為了方便將直接使用引入lessTest.less文件的方式,實(shí)際開發(fā)中建議使用第二種方式)
2. 定義變量 @變量名:變量值;
///定義顏色變量 @pe_color:#204d90; .div1{ width: 100px; height: 100px; background: @pe_color; }