小編給大家分享一下怎么引用less文件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了饒河免費(fèi)建站歡迎大家使用！

引用less文件的方法：首先在項(xiàng)目下面新建一個less文件，并命名為less.less；然后在html頁面的head里面引用該less文件；最后下載less.js文件，并使用cdn的方式引用less.js即可。

Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。

引用：

1、首先我們在項(xiàng)目下面新建一個less文件，命名為less.less，里面寫入最簡單的語法

@base: #000000;
p{
    background-color:@base;
}

2、引用less.less文件

在html頁面head里面引用該less文件

<link rel="stylesheet/less" type="text/css" href="less.less" />

3、引用less.js文件

去 less開源地址（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之前，需要一個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的引用之前

接下來就可以了 , 編輯less文件后就可以直接顯示在頁面中了 ,

打開網(wǎng)頁我們按下F12就會發(fā)現(xiàn) , 頭部 head 標(biāo)簽內(nèi)多了一個 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按鈕。將會在less.less的同級目錄下生成一個less.css文件，然后直接引用這個css文件即可（在less.less中編寫代碼會自動在less.css文件中編譯出css代碼）

以上是“怎么引用less文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：怎么引用less文件
當(dāng)前鏈接：http://jinyejixie.com/article26/pshdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站內(nèi)鏈、App開發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)