喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less

CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧.

Less这么小个东西,竟然要FQ,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.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里的函数了,不过以直觉来看,这些函数用不用都成,大多都是和颜色相关的.