CSS教程:LESS和Sass共同点和区别<3>

前端开发 2876 Views 0 Comments

参数混入

就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章,内容是包含着由有用的参数组成的文件,他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如,在他们的格式中,一个简单的处理圆角的mixin是这样的:


.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在这个例子中,.border-radius有个默认的3px的圆角,但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS,只是使用$声明变量,然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了:

.menu {
 border: 1px solid #ddd;
}
.footer {
 @extend .menu;
}
/* 上面的写法规则和下面的效果是一样的: */
.menu, .footer {
 border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS,你可以嵌套id、class以及标签。对于前面提到的例子,你可以这样写:

#site-body { …
 .post { …
  .post-header { …
   h2 { … }
   a { …
    &amp;:visited { … }
    &amp;:hover { … }
   }
  }
 }
}

上面的代码最终和上面的例子(那一长串的选择器)的效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,该功能类似于JavaScript中的this。

运算

这可能是你所期望的:使用数字或者变量在你的样式表中实现数学运算!


@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下,我也意识到我可以除以4来获得@quarter_page变量,但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中,小括号也是必须的,比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

 /* Sass */
2in + 3cm + 2pc = 3.514in
 
/* LESS */
2in + 3cm + 2pc = Error

CSS教程:LESS和Sass共同点和区别1

CSS教程:LESS和Sass共同点和区别2

CSS教程:LESS和Sass共同点和区别3

CSS教程:LESS和Sass共同点和区别4

CSS教程:LESS和Sass共同点和区别5

转载请注明:一只羊博客 » CSS教程:LESS和Sass共同点和区别<3>

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址