首頁 > web前端 > 前端問答 > 如何引用less文件

如何引用less文件

藏色散人
發布: 2020-12-17 10:36:49
原創
3610 人瀏覽過

引用less文件的方法:首先在專案下方新建一個less文件,並命名為less.less;然後在html頁面的head裡面引用該less文件;最後下載less.js文件,並使用CDN的方式引用less.js即可。

如何引用less文件

本教學操作環境:windows7系統、less2.6.0版,此方法適用於所有品牌電腦。

推薦:《css影片教學

Less 是一門CSS 預處理語言,它擴充了CSS 語言,增加了變數、混合(mixin)、函數等功能,讓CSS 更容易維護、方便製作主題、擴充。 Less 可以運行在 Node 或瀏覽器端。

引用:

1、首先我們在專案下面新建一個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的環境參數,所以最後所有引用檔案如下:

<link rel="stylesheet/less" type="text/css" href="less.less" />
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
登入後複製

註:less變數的宣告必須要在less.js的引用之前

#接下來就可以了, 編輯less檔後就可以直接顯示在頁面中了,

打開網頁我們按下F12就會發現, 頭部head 標籤內多了一個style 標籤; 標籤內就是你所寫的less內容

如何引用less文件

less編譯成css的編譯工具使用方法

less產生css的工具:Koala(http://koala-app.com/)。首先到官網下載安裝文件,安裝運行之後得到如下界面:

如何引用less文件

然後將less所在的目錄拖到界面中間,點擊Compile按鈕。將會在less.less的同級目錄下產生一個less.css文件,然後直接引用這個css文件即可(在less.less中編寫程式碼會自動在less.css文件中編譯出css程式碼)

以上是如何引用less文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板