CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧.
Less这么小个东西,竟然要*,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.http://www.lesscss.net/
这个Less,比起CSS,就是要更少的代码,更多的动态,更多的重用.提供了变量,继承,运算,函数等,我们就来看看吧.
首先是这玩意最后怎么生成CSS, 两种用法,我们先用一秒钟选择最容易的,就是网站提供的生成CSS功能.学了就可以使用了.然后当然也可以在RunJS里直接写.环境问题解决了,来看看语法吧.
1.变量: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?
其实就是定义一个常量 @car : 值; 使用的时候 @var 这个很象Sql的变量定义.
2.混合: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?
其实就是在CSS里再引入另一CSS的名称,如下:
@fontColor: red; .h2 {
font-size: 22px;
} div {
color:@fontColor;
.h2
}
真是简单啊.任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。
3.带混合的参数: 就是混合的定义里可以加参数 .h2(@变量名[: 默认值]),还可以用...表示多个参数.如下:
.h2(@size: 12px) {
font-size: @size;
} div {
color:@fontColor;
.h2(22px)
}
Pattern-matching and Guard expressions 比较多,就是条件判断后再混合.先略过
4.嵌套: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?
就是CSS里再定义CSS,如下:
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
&这个符号还有更多的用法,先略过.
5.运算: 这功能好啊,为什么CSS当年定标准的时候没有想到呢?
任何数字、颜色或者变量都可以参与运算,如border: (@width * 2) solid black;
6.函数: LESS 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。
7.名字空间: 为了更好的组织的封装, 引入的时候用 > 号. 空间名称 > 样式名称,如:
#header a {
color: orange;
#bundle > .button;
}
8.作用域: 如变量定义等,类似JS
9.注释: 除了/**/注释, 也可以用//注释,但生成后自动过滤掉,很奇怪的是当初定义CSS时,为什么不支持//这样的注释呢?
10.导入: Importing如:
@import "lib.less";
@import "lib";
@import "lib.css";
11.字符串插值: 可以把变量插到字符串里.@{val},如:background-image: url("@{base-url}/images/bg.png");
12.避免编译: ~"XXX", 这样XXX内容将原样输出成CSS
13.选择插值: @{val}这样的变量还可以用地选择器名称上,如: .@{name} {color:black;}
14.JavaScript evaluation: 反向使用JS, 作者不建议使用.
然后呢?然后就没有了.Less就是这么少,除掉不建议使用的第14条,及略过的复杂部分,总共就十几条规则,大约5分钟就可以学完了,当然我边学边写花的时间比5分钟要多,还有更多的就是Less里的函数了,不过以直觉来看,这些函数用不用都成,大多都是和颜色相关的.