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 编译软件
下载地址:http://incident57.com/codekit/index.html
②客户端调用方式:
- 首先引用 less 文件,注意引用时使用 link 引入,然后将 rel 属性设置为
rel="stylesheet/less"- 然后引用 less.js,注意:与引入普通 js 引入方式一致,但是一定要放置再 less
样式文件之后!