OurJS


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

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


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

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

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


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

我为什么不再用Compass写CSS(缺点分析)


分享到
分类 心得体会   关键字 分享   发布 ourjs  1424839575777
注意 转载须保留原文链接,译文链接,作者译者等信息。  
Compass 是一个糟糕的项目。目前最大的Sass框架,它目前由Chris Eppstein自己维护,两个Sass核心设计者之一,目前它仍然十分流行。

注* SASS: Syntactically Awesome Style Sheets,CSS扩展语言可编程样式表); 相关文章 LESS vs SASS?选择哪种CSS样式编程语言? 

然而,大约一年前,我就完全抛弃Compass了。我将把从我们的项目中删掉。从我自己的网站中删掉。从我身边的项目中删掉。到底发生了什么?我是怎么从"Compass是最好的"转变到“我不需要它了”的呢?

起初我认为Compass是一个比Sass更好的东西,直到认识到它其实并没有带来多大实惠。至少是还不值得将其引入到项目中,特别是Ruby Sass本身已经很慢了...

这里我绝不是说Compass没用。我也不是劝你不要用。我只是想告诉你不使用Compass时另外一种做事方式。

我们先看看Compass有什么功能:


  • 浏览器前辍(-webkit, -moz等),基于CanIUse数据库 (v1.0.0+);
  • 数学计算函数助手,像cos, sin, pi等等;
  • 颜色助手 像 shade, tint等等;
  • 图片助手像 image-width 和 image-height;
  • 图像切片自动合并编绎 。 注* 小图合大图减小连接请求


还有很多其它的附件


Autoprefixer没什么改进


在Compass 1.0.0之前,浏览器前辍是在Compass里手动管理的。这意味着每产生或传递一个新的前缀,都要拉一次新的请求来删除混入的前缀。不是很理想......这就是为什么Chris在V1.0.0里使用了一种更聪明的方法,直接从CanIUse 提取数据。

同时,非常受欢迎的Autoprefixer 库也能做这样的事。在这一点上,无论是Compass 还是Autoprefixer都能100%使用最新的浏览器前辍,但还有一个重要的区别:在Compass中,你仍然必须在属性和值上加一些前辍,而Autoprefixer作为您部署过程的一部分,随后再处理样式表。

为了输出下面的CSS:

.unicorn {
  -webkit-transform: translateX(42em);
  -ms-transform: translateX(42em);
  transform: translateX(42em);
}

使用Compass得这样写:

.unicorn {
  @include transform(translateX(42em));
}

使用Autoprefixer插件:

.unicorn {
  transform: translateX(42em);
}

后者不仅更简单更短,而且不再需要transform的前缀属性,这一切都很好。


你不会经常用到数学运算



我喜欢Sass为我们在样式表中提供的数学运算的能力。当我们使用CSS的预处理时,我们可以在CSS中混入变量,对于以数字为基础的CSS,但忽略数学的支持CSS来讲,这是一个巨大的进步。

最重要的是,Compass提供了一些先进的数学函数,如 cos, sin, tan, sqrt, pow, pi; 也许还有 acos, asin, atan, log 运算和 e 常量。 在某些情况下,我不得不承认,此功能可能是有用的。例如,在以前的文章中,我使用的 cos 和 sin 打造完美的混合阴影。 前阵子, 我记得需要开方 sqrt 来正确地对齐和旋转伪元素。因此,它们有应用情形。

然而,他们的应用场景是如此罕见,我不得不重新考虑Compass在项目中保留数学函数的充分理由,实现上这些函数都可以在但Sass被polyfilled实现。举例来说,这里是一个纯粹的Sass版的 pow 功能:


/// Power function
/// @param {Number} $x
/// @param {Number} $n
/// @return {Number}
/// @source https://github.com/adambom/Sass-Math/blob/master/math.scss Sass-Math
@function pow($x, $n) {
  $result: 1;
 
  @if $n >= 0 {
    @for $i from 1 through $n {
        $result: $result * $x;
    }
  } @else {
      @for $i from $n to 0 {
        $result: $result / $x;
      }
    }
  @return $result;
}


如果你赵的需要Sass中的高级数学函数,我建议你参考一下 Sassy-Math


您可以自己实现颜色函数



说实施,我对Compass 的颜色函数 不是非常的熟悉,因为我从来没有使用过其中任何一个功能。不过Compass提供了如此多的内置函数来处理颜色,我从来没有感觉有多少的需要。

下面有个例子。在CSS中实现渐变。为了让使用 mix 稍微容易点,我写了两个很短的函数,他们在Compass中是被实现了的。

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix($color, white, $percentage);
}
 
/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix($color, black, $percentage);
}

无论如何,我不认为Compass有必要专门提供这些。

你可以不依赖图片工具


让我们来看一看有用的东西。Compass它是用Ruby编写的,提供的图片助手可以自动计算出类例image-width和image-height这样的属性。这是很实用的,特别当你需要替换图片时,你无需担心尺寸发生变化。

.logo {
  $logo-path: '/assets/images/logo.png';
  width: image-width($logo-path);
  height: image-height($logo-path);
  // ...
}

不幸的是,我们没有办法写polyfill兼容函数来自己实现。Sass无法访问文件系统,因此无法任何弄清楚的图像尺寸。

话虽这么说,我个人倾向于使用SVG并在项目中并尽量地少使用图片。由于SVG是可缩放的矢量图形,我不需要关心它的尺寸。我已经使用好长一段时间了。

SVG Sprite有一大波自动合并的工具


好了,现在我们谈论Sprite Build,它一直是Compass的主要亮点,从文件夹中将小图标自动合并,并创建CSS Sprites只需要一两分钟,也许更少。

@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;


在我们的样式表中自动创建CSS Sprite还有很多其他的选择。按照同样的思路,只用Compass的Sprite工具,我会觉得很奇怪,不管它有多好。没有必要将二者紧密联系在一起,即使它可能带来一些好处。


注* 参见 CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby) 


关于LibSass的一句话


Compass与LibSass 是不兼容的。因为它仍然在很大程度上依赖于Ruby,你不大可在一个“LibSass环境”使用Compass。在当今世界,LibSass越来越被认同,我认为与语言无关是一个主要的目标。显然,Chris也认同这一点,它正在将它移植到LibSass中。

注* LibSass:让Sass扩展样式表语言脱离Ruby框架的依赖,而变成一个可以被方便引用的库。

最后的思考


远离Compass,你真正想要的东西应该是比较简单的。如果你真的需要Compass的小工具,你只需要加一些Sass的函数即可。然后,在项目中引用Autoprefixer甩掉所有的CSS样式前缀。最后,引入一个自定义的Sprite图片自动合并工具。 

其实,Compass并不是一个坏的工具。恰恰相反,Compass是一个了不起的框架!如果你对Compass非常满意,请继续坚持使用。

另外,如果你使用的不太多的话,那么你可以考虑摆脱它,像我一样。

原文地址: 点此
社区评论 ( Beta版 )
  • #0 993 1428461181266

    我觉得说得很好呢,虽然有一些错别字

  • #1 虞饥并 1434122889629

    我也觉得compass好鸡肋,还的有个config.rb配置文件,添加前缀的时候还的记住函数名字,总之各种不顺, 不明白为什么有人叫它特别好!可能是我写css时间比较短,我觉得直接用sass就行了,没必要记住这么多compass提供的mixin,增加记忆成本,css就那几个属性,有必要搞这么复杂么?

  • #2 云劣午 1456124504446

    事实上添加前缀很简单啊,可以自己定义个函数啊。

  • #3 秦专允 1472094470318

  • #4 卫纪左 1476370005270

    哗众取宠

  • #5 卫亡争 1482727578597

    哗众取宠

  • #6 赖水议 1489730804052

    哗众取宠

  • #7 柯买么 1490690406205

    你并没有感受到sass的精髓,你提的功能都不重要,sass最厉害的功能是管理和分类,可以写css模块

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
  2. 让我们写快速的JavaScript,JS性能优化小窍门
  3. CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
  4. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  5. 什么是Viewport Meta(width详解)及在手机上的应用
  6. 专为控制打印设计的CSS样式
  7. Java官方安装包捆绑百度卫士杀毒软件
  8. 通过Web Audio API可视化输出MP3音乐频率波形
  9. 用页面可见性(Page Visibility)API创建用户体验良好的网站
  10. Oracle发布官方版Node.JS数据库驱动
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
  2. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  3. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  4. [译]Node.js 框架比较: Express vs. Koa vs. Hapi
  5. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  6. 保卫AngularJS
  7. Angular.JS出了什么问题?
  8. 我们不需要JavaScript框架
  9. 各大邮件群发/订阅代理服务商比较
  10. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)

 关键字 - 分享
  1. 这几款app自动化测试工具 你应该了解
  2. 从出现到现在,小程序带给企业的各种好处。
  3. 小程序的三个更新,会给企业带来巨大改变!
  4. 扫描识别控件Dynamic Web TWAIN 13.0发布,新增统一的Dynamsoft服务
  5. 【重大更新】DevExpress v17.1新版亮点(Dashboard篇)
  6. .net reactor使用教程(三)——.net reactor应用场景
  7. 小程序的发展情况,企业可以从这些方面了解!
  8. 小程序未来肯定会朝着这些方面发展,企业必须做好!
  9. LoadRunner12使用教程(七)——准备脚本回放
  10. MailBee.NET Objects接收电子邮件(POP3)教程二:接收和显示HTML电子邮件

 欢迎订阅 - 技术周刊

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


 关注我们

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

ourjs官方微信号