LESS —— 动态样式语言 学习纪要
学习LESS源于一次分享的要求。之前一直没有使用,是因为使用这种以“敏捷开发”为目标而诞生的语言在一开始总是需要一些时间来变换思维,以及随之而来的“如何让CSS也具有结构性”的思考负担。其实这些思考都是应该有的,只是在项目时间比较紧的时候,往往更希望通过“加快打字速度”来提高效率。。。。
言归正传。。。LESS的语法和使用在中国社区已经描述的很清楚了,所以我只从自己学习使用的角度记录些需要注意的问题。
客户端使用
1. 直接打开html文件,IE下报“SCRIPT5:拒绝访问”的错误
按照手册中的说法创建完相应的less、html文件,加载完js,在firefox下直接打开html文件,运行正常;但是在IE下打开,则会报“SCRIPT5: 拒绝访问。 less-1.1.3.min.js ”,这个是跨域错误,file协议的跨域判断和http不一样,而没标准规定各个浏览器的file协议怎么算同域。解决方法就是把文件部署在服务器上,用http访问。。。
2. 页面顶部出现大大的“参数无效”红色提示
好好检查less文件吧,有地方语法写错了。也不知道这种风格的提示好还是不好,虽然够醒目,但是未免太霸气了点儿。。。
3. “混合”在浏览器兼容上的应用
这个是LESS中我比较喜欢的一个语法。它使得我们可以将一些通用的属性归集到一个class中,然后在不同的地方调用这个class。在我的某个网页中,我用这个语法首先解决的一个问题就是“拥有float属性的元素的margin在IE浏览器下比其它浏览器多2px”的兼容问题。兼容margin代码如下:
.margin (@top:10px, @right:10px, @bottom:10px, @left:10px) { margin: @arguments; *margin-top: @top - 2px; /* IE7 and below */ *margin-right: @right - 2px; /* IE7 and below */ *margin-left: @left - 2px; /* IE7 and below */ *margin-bottom: @bottom - 2px; /* IE7 and below */ }
这样我就不用在每次给元素增加margin属性的时候都需要加一大串的兼容代码。如:
.red-button { background-color: @my_red; .button; .margin(); } .medium-red-button { background-color: @my_red; .button(100px, 40px, 10px, 5px); .margin(15px, 15px, 15px, 15px); } .big-red-button { background-color: @my_red; .button(100px, 40px, 10px, 5px); .margin(15px, 20px); }
写这段的时候出现过一个问题,因为使用@arguments来避免单独处理每一个参数,所以起初是以为可以直接使用.margin;来调用该属性,但是没有生效,后来改成了.margin();就可以了。 但是如果不使用@arguments,则可以直接用.margin; 这种调用方式。
另外我上面的top,right的兼容代码这些都是分开写的,因为我还没在手册里看到如果和表达式罗列的写在一起,比如这样。
margin: (@top-2px) @right @bottom @left;
翻到后面,发现不是人家没罗列,是我写错了,如果要在复合属性中做计算,运算符号与变量之间要保留一个空格,并用空号包起。即
margin: (@top - 2) @right @bottom @left;
切记!!!
4. “模式匹配”的惯性思维
第一次看模式匹配的语法,想当然的把switch case的思维惯用上了,写出了如下样子的代码
.mixin (press, @color) { background: darken(@color, 10%); } .mixin (hover, @color) { background: lighten(@color, 10%); } .mixin (@_, @color) { background: @color; }
想象的结果是当按钮是press状态时是加深背景色,hover状态时是淡化背景色,其余情况都是正常背景色。真实结果明眼人都知道了,所有状态都是正常背景色。。。原因很简单,参数匹配成功后,下面的匹配仍然继续进行,且@_接受任何参数,最后背景色就都被这个设置覆盖了。正常的switch case是有break强制停止匹配的,LESS中没有,所以带@_参数的类在LESS语法中应该起到的是一个对公用属性的统一配置的作用。
5. “嵌套规则”挺好用
写CSS的时候最郁闷的就是为了保证属性不冲突,要从父元素到子元素的写一串儿选择器,“嵌套规则”解决了这个问题
#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }
6. 再也不用写一堆url前缀啦~~
LESS的“字符串插值”功能允许将变量插入字符串中,这个最直接的应用当然就是image url的定义了。如果在配合之前的几种语法,那些应用image sprite中图标定义也会简单很多。
汗,我写到这里以后,本来打算写一段实例代码,比如
@base-url: "http://img.t.sinajs.cn/t4/style/images/common"; @icon-image-url: "ico.png?id=1341302813656"; .icon (@index) { background-image: url("@{base-url}/@{icon-image-url}"); background-position: 0px (0 - (10 * @index)); } .icon (@_) { width: 50px; height: 50px; } #icon1 { .icon (1); } #icon2 { .icon (2); } #icon3 { .icon (3); }
结果实际输出的css让我大为“惊喜”
#icon3 { background-image: url("http://localhost:8080/dont_commit/http://img.t.sinajs.cn/t4/style/images/common/ico.png?id=1341302813656"); background-position: 0 -130px; height: 50px; width: 50px; }
LESS似乎给我的url前面强行增加了个root,之后我改成../这种相对路径也是这样,我想这应该是less的一个bug吧,一会儿去看看有没有解决方法。
7. LESS的浏览器兼容性
LESS的js本身目前来看是对各浏览器都兼容的,但是考虑到LESS的本质——就是把一种格式的语言解析正常规CSS,应该算是直译,而没有顺路增加些浏览器的兼容hack代码,因此,如果你的代码里出现了一些只有某些浏览器支持的属性,那出来的CSS代码依然只支持那些浏览器。
比如,LESS提供的色彩函数:fadein(@color, 10%) 这个最后生成的是 rgba格式的色彩,IE6不支持,所以这个函数在IE6下并没有效果。
8. LESS生成的CSS与一般CSS文件的优先级
实验代码时,在普通CSS文件和LESS文件中同时定义了两个相同的选择器,只是属性各有不同;并把CSS放在LESS之后加载(有两种方式:1. 在LESS的最后@import 2. 在html中直接在LESS之后引用)。但是输出到浏览器上以后,对于使用@import的,此段CSS被自动调到了代码首部;对于html直接引用的,也变成在LESS之前引入。最后的结果就是CSS中的定义被LESS中的覆盖。因此,在这里先冒昧的下个结论:LESS生成的CSS优先级高于一般CSS文件。
问题和注意的话暂时我就总结出来这么多,其余的LESS提供的一些自带函数,以及引入javascript表达式也是很便利的功能。另外,我觉得在平时的开发中,最好不要让LESS成为开发思想的包袱,不要写什么都要花一天想想怎么转成LESS代码,LESS就是一个工具,需要的时候用,不需要的时候舍,这样才比较健康。