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模块

  • #8 俞向由 1506599363749

    不懂不要乱说

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. 干货满满!20篇IntelliJ IDEA使用技巧整理!
  2. 【更新】支持多种格式音视频的本地.NET组件Audio Sound Recorder for .NET 更新至v9.0.0.0
  3. 【更新】音频视频组件Audio DJ Studio for .NET更新至v10.0.0.0丨附下载
  4. 【示例教程】LEADTOOLS中如何载入DICOM文件并压缩
  5. 【DevExpress v17.2新功能预告】增强ASP.NET TreeList
  6. 分析JavaScript10个常见BUG以及修复方法
  7. 【示例教程】LEADTOOLS中如何使PACS服务器管理器支持H264
  8. 文档管理控件Xshell 发布v6 Beta版本,引入会话管理器面板丨附下载
  9. MyEclipse WebSphere开发教程:WebSphere 7安装指南(三)
  10. 使用简单的JavaScript,我们为什么应该抵制ES6的一些特性

 欢迎订阅 - 技术周刊

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


 关注我们

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

ourjs官方微信号