快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

原文:LESS介绍及其与Sass的差异
译自:An Introduction To LESS, And Comparison To Sass
原作者:Jeremy Hixon
请尊重版权,转载请注明来源,多谢!

自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。

Less-sass1 在 LESS介绍以及与Sass的差异 中

事实证明,LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性,比如下面这些:

  • 混入(Mixins)——class中的class;
  • 参数混入——可以传递参数的class,就像函数一样;
  • 嵌套规则——Class中嵌套class,从而减少重复的代码;
  • 运算——CSS中用上数学;
  • 颜色功能——可以编辑颜色;
  • 名字空间(namespace)——分组样式,从而可以被调用;
  • 作用域——局部修改样式;
  • JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。

另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单:

  1. 下载less.js;
  2. 创建一个文件来放你的样式,比如style.less;
  3. 添加以下代码到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢?——你可

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号