引用less文件的方法:首先在專案下方新建一個less文件,並命名為less.less;然後在html頁面的head裡面引用該less文件;最後下載less.js文件,並使用CDN的方式引用less.js即可。
本教學操作環境: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編譯成css的編譯工具使用方法
less產生css的工具:Koala(http://koala-app.com/)。首先到官網下載安裝文件,安裝運行之後得到如下界面:
然後將less所在的目錄拖到界面中間,點擊Compile按鈕。將會在less.less的同級目錄下產生一個less.css文件,然後直接引用這個css文件即可(在less.less中編寫程式碼會自動在less.css文件中編譯出css程式碼)
以上是如何引用less文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!