Less
Less语法
引入:变量、嵌套、继承、运算、混合、匹配模式
用法
客户端
我们可以直接在客户端使用 .less(LESS 源文件),只需要从http://lesscss.org 下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
需要注意的是:在引入 .less 文件时,rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。
服务器端
node nmp安装less,在node环境中对less源文件进行编译
@import “variables.less”;
使用编译生成的静态 CSS 文件
我们可以通过 LESS 的编译器,将 LESS 文件编译成为 CSS 文件,在 HTML 文章中引入使用。这里要强调的一点,LESS 是完全兼容 CSS 语法的,也就是说,我们可以将标准的 CSS 文件直接改成 .less 格式,LESS 编译器可以完全识别。
koala
koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译,帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。
项目地址: http://koala-app.com/index-zh.html
Koala 特性:
多语言支持 :支持 less 、 sass 、 coffeescript 和 compass framework 。
实时编译: 监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。
编译选项: 支持自定义编译选项。
代码压缩: less
注意:网站不要直接引用less 因为浏览器光是用less.js解析less文件就很耗性能一般都是依靠nodejs或者其他编译器把less转换成本地css再去引用该css
优劣势
优势:
- 代码量少,可读性强,模块化,加快工作效率,
- 变量和运算,实用工具
劣势:
- less的层级嵌套设计,层次嵌套太长降低可读性,对性能影响
- 麻烦,预先编译,比sass好在可以通过引入.js测试,但开发中如果客户端引入less.js明显会导致网页变慢。
笔记
继承 .extent
.parentClass{
color:red;
}
.subClassOne{
&:extend(.parentClass);
}
.subClassTwo:extend(.parentClass){
}
编译效果:
.parentClass,
.subClassOne,
.subClassTwo {
color: red;
}
关键字extend里面的选择器必须与已定义的样式选择器严格一致,如div .a{}样式只能通过extend(div .a)继承,而不能是extend(.a),尽管这两者在CSS中并没太多区别。