less基礎引用

1.介紹：

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

2.引用：

（1）首先我們在項目下面新建一個less文件，命名為less.less，里面寫入最簡單的語法

@base: #000000;

p{
    background-color:@base;

}

（2）然后在html頁面head里面引用該less文件

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

（3）去 less開源地址 下載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 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的引用之前

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

（1）less生成css的工具：Koala。首先去官網下載安裝文件，安裝運行之后得到如下界面：

（2）然后將less所在的目錄拖到界面中間，點擊Compile按鈕。將會在less.less的同級目錄下生成一個less.css文件，然后直接引用這個css文件即可（在less.less中編寫代碼會自動在less.css文件中編譯出css代碼）