OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

LESS vs SASS?选择哪种CSS样式编程语言?


分享到
分类 心得体会   关键字 分享   发布 ourjs  1390450382000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
By Zing Design

你可能已经被关于应该用Sass还是用LESS的争论折磨死了。在这篇文章中,我会解释为什么你应该使用Sass。如果你感兴趣,我会介绍如何开始使用Sass以及在预处理时会遇到的一些问题。

在我的长篇大论之前,让我稍微提一下,你应该先学一下LESS。LESS对于初学者来说是极好的:它非常容易使用和设置,它跟CSS非常像,写起来非常直观,简单还有友好,我曾经非常喜欢LESS。

直到最近我发现了Sass和Compass的。往回看,我还是倾向于LESS是针对初学者的,是对预处理CSS很好的入门。Sass是下一代的,对有经验的前端工程师来说是很有用的工具。

为什么Sass比LESS要好


Sass有很多可用的方法和逻辑。例如:条件和循环语句。LESS也可以做到,但不是很高效且不直观。像LESS一样,Sass也内置了一些非常友好的函数,像颜色,数字,还有变量列表。
Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用,但并不完全一样,因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性,像自动生成图片切片(CSS Sprites),传统浏览器支持,还有对CSS3的跨浏览器支持等。

Compass同样允许你使用外部框架像Blueprint, Foundation 或 Bootstrap。这也意味着你可以非常容易的使用你喜欢的框架而不需要掌握各种不同的工具。

LESS的问题


LESS的目标是尽量跟CSS在风格上保持一致,包括语义和结构。这对于用户的书写习惯来说是一个很好的想法,这样也让它的工作方式和SASS有很大的不同。

逻辑语句

在LESS中你可以使用"guarded mixin"来表达基本的逻辑:

.lightswitch(@colour) when (lightness(@colour) > 40%) {
  color: @colour;
  background-color: #000;
  .box-shadow(0 3px 4px #ddd);
}
.lightswitch(@colour) when (lightness(@colour) < 41%) {
  color: @colour;
  background-color: #fff;
  .box-shadow(0 1px 1px rgba(0,0,0,0.3));
}

等价于SASS中的:

@mixin lightswitch($colour) {
  color: $colour;
  @if(lightness($colour) > 40%) {
    background-color: #000;
    @include box-shadow(0 3px 4px #ddd);
  }
  @if(lightness($colour) <= 40%) {
    background-color: #fff;
    @include box-shadow(0 1px 1px rgba(#000,0.3));
  }
}


循环

在LESS中你可以使用数字实现循环

.looper (@i) when (@i > 0) {
  .image-class-@{i} {
    background: url("../img/@{i}.png") no-repeat;
  }
  .looper(@i - 1);
}
.looper(0);
.looper(3);

 输出:

.image-class-3 {
 background: url("../img/10.png") no-repeat;
}
.image-class-2 {
 background: url("../img/9.png") no-repeat;
}
.image-class-1 {
 background: url("../img/8.png") no-repeat;
}

在Sass中你可以枚举任何类型的数据,这个可能更有用

@each $beer in stout, pilsner, lager {
  .#{$beer}-background {
    background: url("../img/beers/#{$beer}.png") no-repeat;
  }
}

输出

.stout-background {
 background: url("../img/beers/stout.png") no-repeat;
}
.pilsner-background {
 background: url("../img/beers/pilsner.png") no-repeat;
}
.lager-background {
 background: url("../img/beers/porter.png") no-repeat;
}


自定义函数

在Sass中,你可以创建你顺手的字定义函数,像这样:

$em-base: 16px !default;
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

LESS中:
@em-base: 16px;
.emCalc(@pxWidth) {
  //Ah. 没办法了...
}
呵呵…  你更喜欢哪一个呢?

用Sass和Compass时的问题


这些似乎是人们在使用Sass时遇到的最大问题:

你需要搭建Ruby的运行环境;
你对命令行有点恐惧;
切换到另一个工具所产生的不便和额外的时间消耗;

安装SASS请参考SASS官方网站:  http://sass-lang.com/install

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 你不知道的JavaScript用法,Hacker是这样写JS的
  2. QQ邮箱是如何泄密的:JSON劫持漏洞攻防原理及演练
  3. 那些用JavaScript写的操作系统
  4. 为什么大神级程序员的C语言代码里到处都是goto?
  5. 下一阶段的NodeJS:TJ负责Node,NPM可能要收费
  6. Web标准化正在消灭HTML程序员
  7. 告诉大家一个好消息,我被炒了!
  8. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  9. NPM开始招人了
  10. 一名靠谱的JavaScript程序员应备的素质
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 别用CoffeeScript了,你总有一天得学JavaScript
  2. 为什么大神级程序员的C语言代码里到处都是goto?
  3. 微软,请不要使用 Try/Catch
  4. 人们为什么不使用Python3?
  5. 代码不等于计算机科学:为什么所有人都应该学习编程
  6. 一名靠谱的JavaScript程序员应备的素质
  7. 程序员最艰巨的十大任务
  8. 世界上最优秀的程序员同时也是活得最快乐的人
  9. 做从未被做过的事:偶遇 Russell Kirsch
  10. 他们为什么说面向对象有问题,探讨面向对象的一些缺陷

 关键字 - 分享
  1. 【示例教程】如何使用LEADTOOLS图像标注控件在界面上对图像进行标注
  2. 有了大数据加智能,你愿把荷包交给机器打理吗?
  3. 【更新】视频处理软件BB FlashBack更新至v5.27,提高摄像头FPS
  4. 【教程】FileAudit入门的基本要求
  5. MyEclipse项目迁移常见问题解答
  6. DevExpress v17.2新版亮点—WinForms篇(一)
  7. 高报酬寻安卓APP马甲和iOS马甲上架技术人员, 上架一个最高30000元
  8. 六款互联网人不容错过的软件神器
  9. 【示例教程】如何通过leadtools读取二维码中的中文
  10. 【更新】Windows网络守门人UserLock更新至v9.6,可通过Webhooks获取实时登录通知

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号