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>