您好,登錄后才能下訂單哦!
小編給大家分享一下怎么引用less文件,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
引用less文件的方法:首先在項(xiàng)目下面新建一個(gè)less文件,并命名為less.less;然后在html頁(yè)面的head里面引用該less文件;最后下載less.js文件,并使用CDN的方式引用less.js即可。
Less 是一門 CSS 預(yù)處理語(yǔ)言,它擴(kuò)充了 CSS 語(yǔ)言,增加了諸如變量、混合(mixin)、函數(shù)等功能,讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
引用:
1、首先我們?cè)陧?xiàng)目下面新建一個(gè)less文件,命名為less.less,里面寫入最簡(jiǎn)單的語(yǔ)法
@base: #000000; p{ background-color:@base; }
2、引用less.less文件
在html頁(yè)面head里面引用該less文件
<link rel="stylesheet/less" type="text/css" href="less.less" />
3、引用less.js文件
去 less開(kāi)源地址(https://github.com/less/less.js/archive/master.zip) 下載less.js文件,然后引入該文件。
<script src="less.js" type="text/javascript"></script>
也可以直接使用CDN的方式引用less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
4、在引用less.js之前,需要一個(gè)less變量,聲明編譯less的環(huán)境參數(shù),所以最終所有引用文件如下:
<link rel="stylesheet/less" type="text/css" href="less.less" /> <script type="text/javascript"> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
注:less變量的聲明必須要在less.js的引用之前
接下來(lái)就可以了 , 編輯less文件后就可以直接顯示在頁(yè)面中了 ,
打開(kāi)網(wǎng)頁(yè)我們按下F12就會(huì)發(fā)現(xiàn) , 頭部 head 標(biāo)簽內(nèi)多了一個(gè) style 標(biāo)簽 ; 標(biāo)簽內(nèi)就是你所寫的less內(nèi)容
less編譯成css的編譯工具使用方法
less生成css的工具:Koala(http://koala-app.com/)。首先去官網(wǎng)下載安裝文件,安裝運(yùn)行之后得到如下界面:
然后將less所在的目錄拖到界面中間,點(diǎn)擊Compile按鈕。將會(huì)在less.less的同級(jí)目錄下生成一個(gè)less.css文件,然后直接引用這個(gè)css文件即可(在less.less中編寫代碼會(huì)自動(dòng)在less.css文件中編譯出css代碼)
以上是“怎么引用less文件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。