Why Sass?

好久不写HCI翻译项目了~~恩,拾起~~哈
===========================================正文===============================
原作者:DAN CEDERHOLM @ November 13,2013

原文备注: 这是DAN CEDERHOLM<<Sass For Web Designers>> 一书的一部分摘要.

正文:

我并不是一个Sass的虔诚信奉者. 我一般都是自己写样式表! 我不需要任何帮助!而且我当然不想要给我的工作增加任何的复杂成分.所以,请走开(Sass)!

无论如何,这是最初的想法.但是实际上,Sass以及其他的CSS预处理程序都可以成为一个非常强有力的帮手,一个任何样式作者都可以轻易的在日常工作中使用的工具. 它确实让我犹豫了好一阵儿,不过我非常确定我很高兴我真的这么做了.

而这也是我想要写这本书的原因. 来分享我是如何通过使用Sass在保持我自己10年来形成的舒适的CSS写作方式的同时让自己变得更加高效的.最初,我对Sass有很多误解,这也是一直阻止我去接近它的原因.我一直担心自己需要完全变更自己已有的写作和管理样式表的方式.因为CSS很多时候确实很琐碎,所以对于作者们希望保护自己的创作的心情是可以理解的~不是吗?

恩,所以,我在此向大家展示Sass是如何在不打断你的工作和处理方式的同时让你的生活变的容易的~~我会阐述Sass的各个方面: 如何安装?如何使用?以及它是如何在我自己的项目中帮助我们的.幸运的话,我希望你也能成为一个Sass的信奉者~~

Sass的电梯游说

假如你要做个小改动,比如说一个颜色值,然后你发现自己需要在多处修改这个值.难道你不希望CSS可以允许你这么做吗:


$brand-color: #fc3;
a {
color: $brand-color;
}
nav {
         background-color: $brand-color;
}

如果你只需要在一个地方修改这个值,然后整个样式文件都会生效,这样岂不快哉?用Sass就可以!~

再比如在样式文件中多处重复使用的样式模块:

p {
margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}
footer {
         margin-bottom: 20px;
         font-size: 14px;
         line-height: 1.5;
}

如果把这些共享的规则都放进一个重复使用的模块中不是更奇妙更好吗? 再一次,利用Sass你就可以只需要定义一次,然后在任何地方使用它了

     @mixin default-type {
     margin-bottom: 20px;
     font-size: 14px;
     line-height: 1.5;
}
p {
@include default-type;
}
footer {
     @include default-type;
}

这些都是Sass的功劳!这两个极为简单,只能算得上Sass工作的皮毛的例子已经足以告诉你Sass是如何让样式文件的制作更加的快捷,更加的容易以及更加的灵活~这是一个在网页设计领域非常受欢迎的助手, 因为任何一个制作网站的人都知道…

CSS很难

我们需要面对这个事实: 学习CSS并不是一个容易的事情.了解每个属性都能做什么,层叠是如何工作的,哪个浏览器支持哪个属性,选择器,各种技巧等等,这并不容易.再加上我们现在这个时代流行的界面的复杂度,以及长时间的维护...等等,为什么我们再次开始抱怨这些? 这是一个迷,而我们中的部分人会非常享受最终的完工一刻~

但CSS的问题还在于它最开始并不是用来做现在做的事情的.当然,因为浏览器快速的而更新以及CSS3的实施等,CSS有了一个非常不错的转变但是我们仍然需要依赖那些技术,或者说,那些技巧.比如说float这个属性,其实是设计来让在一个文本块中的图片能够很好的对其.对,就是这样,而我们则逐渐利用这个属性来调整整个界面的布局

我们的样式表更是拥有者大量的重复.颜色,字体,以及经常使用的成堆的样式属性等等.一个典型的CSS文件是一个非常极端的线性文档–那种让一个面向对象的程序员想要把自己的头发揪掉的东西…我并不是一个面向对象的程序员,但是我确实剩下没多少的头发…你可以尽可能曲解此意..

随着界面和网页应用变得更加强大和复杂,我们正在将原本的CSS运用到更加广阔的地方,那些想都没想过的地方.我们实际上很享受其中.幸运的是,浏览器一致在非常快速的适应着最新的CSS特性,利用更加高效抢到的属性以及选择器来解决各种现在遇到的问题.那些像CSS3新的层级属性:border-radius,box-shadow,以及高级的选择器,变化,变形,动画等等.这是一个令人兴奋的时代,当然,CSS本身还有很多的欠缺.随着漏洞的逐渐修补完善,样式的制作者们的生活应该变得更加容易~

DRY原则

如果我们窥视到软件工程的世界(这里我更喜欢用窥视而不是逛悠,也更加自然),我们可以很快的了解到那些关于组织结构,变量,常量,控制变量等概念都是非常根深蒂固的,对于创建复杂系统都是非常关键的工作.

你可能听说过”不要重复(代码)”(DRY)原则.由Andy Hunt以及Dave Thomas在他们的<>一书中提出,含义是:

知识的每一个碎片在其系统内都一定有一个单独的,不混淆的,权威的表述.

这一观点的提出是因为重复的代码很容易造成失败以及对开发者造成困惑.同样作为常识:把公用的模式只写一遍然后在整个程序中重复使用.这对于维护代码也会更加高效而容易.

CSS就是典型的DRY原则适用者.曾经,它充斥着各种重复的规则,声明,属性等等,在整个样式文件中我们不断的重复着那些颜色,字体等常用的样式类型…一旦看过一个适当的CSS文件,一个DRY原则实践者一定会泪牛满面的,先是困惑,然后会遇到失望于挫折.

“如何维护这些恶心的符号!@#$?”他们会问.
“我告诉你过关于IE的bug吧?”你一定会带着一丝厌恶的回答他.

那么为什么CSS会这么的难用呢?

我们可以从CSS的共同创始人Bert Bos的一篇文章中获得一些提示:

CSS停用了很多在其他语言中使用的比较强大的功能,比如宏,变量,符号常量,条件语句,变量表达式等等,那是因为这些东西会让很多厉害的使用者们获得更多的方便和技巧,但是那些经验比较少的人常常会不自知的陷入其中,不能自拔; 或者更可能的是,他们甚至不会去尝试接近CSS.这算是一个平衡,而且对于CSS而言,这个平衡还略有不同.

最初的CSS构架是经过深思熟虑后的.他们非常希望能有更多的人可以自己创建网站.他们希望CSS能成为一个足够强大的工具来自定义他们的网页,在易用和易于理解的同时又能和内容的展示区分开来.我当然对此表示非常尊重.同时,我们又必须承认我们目前的工作正在越来越复杂,越微妙,也越来越有挑战性,无论是维护还是未来发展.

幸运的是,还是有很多方法可以帮助我们脱离苦海,其中之一就是使用Sass.

什么是Sass?

Sass是一个CSS的预处理程序--一个介于样式表和css文件之间的中间层.Sass(Syntactically Awesome Stylesheets的简称)为CSS填补了不少漏洞,允许你利用DRY原则更快的coding,更加高效也更加容易的维护.

Sass官网上给出的简介如下:

Sass是一个基于CSS之上的元语言,用来更加整洁以及结构化的方式来描述一个样式文本,比单纯的CSS要更加强大.Sass同时提供了一个更加简单,更加优雅的CSS语法以及更多样的特性使用来创建更加可控的样式文件.

所以,当常规的CSS不能允许的诸如变量,复用块以及其他的好东西,Sass都可以提供,为你的CSS开启了”高级功能”模式.之后又可以通过一个命令行程序或者网页框架插件把这些语法翻译成一个常规的CSS文件.

更特别的是,Sass是一个CSS3的扩展,而且它的SCSS语法–我们稍后会谈到–是CSS3的父集.意思是,任何有效的CSS3文本都是一个有效的SCSS文本.这促成了Sass可以作为一个你很容易使用的工具.开始Sass的过程是没有任何痛苦的,而且你可以随意的使用或多或少的SCSS语法~这也意味着将一个现成的CSS文件转为SCSS格式的文件是可以分步进行的,随着你对Sass的功能的了解而逐步加深.

稍后,当你已经熟练使用Sass时(这不会需要多少时间),它就会变成一个CSS的扩展,非常自然,就好像CSS自己把我们想要它弥补的那些漏洞补上了一样.这也是为什么,一旦我开始使用Sass后,我就从来不曾认为它有任何的尴尬或者费劲–它就像CSS应该做到的那样.一旦你开始尝试了,你很有可能就会永远的离不开它.

Sass的误解

我之前提到过我非常犹豫的尝试Sass.这也是因为我在使用它之前听到的大量的传闻.我需要先了解Ruby或者高级的命令行技巧吗?我需要完全改变我写css的方式吗?输出的css会不会很臃肿完全不能看呢?

谢天谢地,以上所有的问题的答案都是否定的,当然,但是我确实能从各种网络渠道到听到很多人在提到Sass的时候蹦出这些问题…让我们来清理一下一部分流言:

我很恐惧命令行...

无论从哪方面讲我都绝对不是一个命令行专家,但是这么多年来,我或多或少的在不同地方学到了一些,刚刚够让我陷入困境的...我不担心切换文件系统或者使用Git命令等.

那意味着,我同情那些设计师以及前端开发者,他们从不担心这些.在一些人群中确实有一种命令行的恐慌.对于Sass,只需要非常少的一些命令行操作-实际上,一个命令行就足够做到所有了~更何况,现在有很多app以及网络框架都可以让你免受命令行的打扰来实现一切.(在下一章我会介绍这些工具)

所以,如果你想要避开命令行,那么不要让命令行成为阻止你接触Sass的理由~

我不想要改变我写CSS的模式

这是我当时所持有的一个误解.我特别在意的就是我的样式文件的结构和组织方式.这里有非常多的个人习惯存在其中. 但是要记住,因为SCSS是一个CSS3的父集,所以你完全不用改变任何你写CSS的方式和习惯.注释,缩进或者不缩进等,所有你所偏好的设置都可以保留在.scss文件中.一旦我了解了这些,我就没有任何恐惧的开始了Sass之行.

我不想要SASS改变我设计的方式

另一方面,Sass并不会解决你所有的问题,也不会纠正你的话习惯.更无效率的是,臃肿的样式即便用Sass也会同样的臃肿.良好的组织以及敏捷的思考仍然适用这里.实际上,有很多例子证实Sass可以放大一些弊端,这些我们稍后也会到.但是当使用的足够合适和明智,Sass将会成为一个非常优秀的网页助手.

好吧,我们先把所有的细节都移开,让我们先玩些有趣的事情.我想你一定会被Sass所能做到的事情所震惊的.在下一章,我会建立起我们的工作流–Sass是如何适应你的处理流程以及在命令行或者app中操作它是多么的简单.让我们开始Sass吧~凡人们!

DONE!–有兴趣的可翻阅全书! 从国外网盘找到了先关资源~~分享给大家(因为公开分享会导致审核失败…所以只能私密了,领取码为:77ur)~~有机会可能会翻译全书.