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>