LESS簡介與使用方法

less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

一、傳統寫法與 less 寫法對比

1. 傳統 css 寫法：

.content ul{
    list-style:none;
}
.content li{
    height:24px;
    line-height:25px;
    padding-left:15px;
}
.content li a{
    color:#535353;
    text-decoration:none;
    font-family:"微軟雅黑";
}

 

2. less 寫法：

.content ul{
    list-style: none;
    li{
        height:24px;
        line-height:25px;
        padding-left:15px;
        a{
            color:#535353;
            text-decoration:none;
            font-family:"微軟雅黑";
        }
    }
}

 

二、less 的注釋

//：以//開始的注釋，不會被編譯到 css 文件中
/**/：以 /**/包裹的注釋會被編譯到 css 文件中

 

三、less使用方法

1. 如何使用 less：less 文件只有在被編譯后才能夠被瀏覽器識別使用

2. less 方式使用方法有兩種：

① less 編譯工具：

• Koala，國人開發的全平台的 less 編譯工具
  下載地址：http://koala-app.com/
• WinLess，Windows 下的 less 編譯軟件
  下載地址：http://winless.org/
• CodeKit，MAC 平台下的 less 編譯軟件
  下載地址：https://codekitapp.com/

②客戶端調用方式：

• 首先引用 less 文件，注意引用時使用 link 引入，然后將 rel 屬性設置為
  rel="stylesheet/less"

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

• 然后引用 less.js，注意：與引入普通 js 引入方式一致，但是一定要放置再 less
  樣式文件之后！

<script src="less.js" type="text/javascript"></script>