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就是一个工具,需要的时候用,不需要的时候舍,这样才比较健康。

相关推荐