Sass Workflow--Chapter 2

100
TaoAlpha2013-12-195032 words15 minutes to read

这个是”Sass for web designers”一书的第二章:

SASS的工作流

既然我们都知道了SASS是什么,就让我们开始切实的使用以下它吧. 我们首先需要做的就是安装,把Sass安装到你的电脑之中.我在第一章中提到SASS是一个用Ruby写的程序,将它的语法翻译成CSS的结构. 所以,在我们开始使用Sass之前,我们需要先安装Sass.

在MAC上安装SASS

如果你是Mac用户(恭喜你,你是如此幸运!),安装Sass会非常简单. Mac OS X预装了Ruby,而Sass作为一个Ruby的一个”GEM”,非常贴切的一个术语,对Ruby的程序而言.

你可以开启你的Terminal(终端)–不要恐惧哈~ 在提示符后输入如下命令,然后回车即可:

1
2

$ gem install sass

并没有想象中那么糟,不是吗? 在你按下回车后,你会看到终端中输出了一堆东西..此处略掉.

那么恭喜你你已经成功的安装了sass

在写本书的时候, sass的官方更新最新版本时3.2.10, 终端中会贴切的展示这些信息~

安装最新的预发布版本
你还可以选择更潇洒一些, 安装预发布的alpha版本, 通过在之前的命令之后就爱上pre的标记即可. 使用alpha版本并不安全, 但是它可以允许你利用那些最新的功能~ 而为了获取最新的以及最棒的功能体验, 那么请在中断中输入以下代码, 再按下回车:

1
2

$ gem install sass --pre

你将再次看到终端中输出一堆东西…再次略..

大功告成, 如此你就算是成功的站在了时代的前沿, 向你的勇气和胆量致敬.

在WINDOWS上安装SASS

不像Mac, windows并没有预装Ruby, 官网上推荐使用RubyInstaller的windows版本来安装. 一旦Ruby成功安装后, 你就可以像在Mac中的操作一样了~

告诉SASS去watch什么文件

好, 我们装好了Sass, 然后呢? 我们需要告诉Sass那些文件是需要”监控”的. 意思是, 当我们编辑一个样式文件时, 我们需要Sass监控对应的文件并且把我们每次修改后的.scss的文件转换为浏览器可识别的css文件~ 有多种方法来完成这一操作:

  1. 一个命令行的简单命令;
  2. 一个桌面app(有很多个)来帮助你管理你的sass文件以及它们的输出文件;

我们首先试下命令行的方式. 不要恐惧! 很简单的. 本质上来说, 这一个命令就是让sass去监控一个特定的.scss文件, 并把这个文件转换为.css文件~

例如:

1
2

$ sass --watch screen.scss:screeen.css

当你运行完上述命令后, sass会自动监控screeen.scss文件, 并且每当它有任何的变化, 一旦你在终端中按下回车, 你就可以看到如下的提示:

1
2

>> Sass is watching for changes. Press Ctrl-C to stop.

如果这个文件更新了, Sass就会将它转换, 然后重新生成.css文件并且自动覆盖原文件. 换句话说, 每次你在你的Sass文件中保存任何的变化, css文件就会立刻更新.

文件的名字不需要相互匹配. 比如, 如下的命令也可以完全适用(虽然它可能会出现一些混淆):

1
2

$ sass --watch werewolf.scss:vampire.css

更进一步, 这两个文件甚至可以不在同一个文件夹下. 实际上, 我发现把.scss文件和.css文件分开来时非常有好处的. 这并不是必须的, 但是对于让整个项目更便于管理有帮助.

Sass 文件的管理

图2.1演示的是一个典型的初始结构, 有一个stylesheets的文件夹, 里面是所有转换后的css文件,同时包含一个sass文件夹用来存放对应的scss文件. 你可以告诉Sass监控整个文件夹而不是某个单独的文件. 所以利用上述的额结构, 你就可以用下面的命令来监控整个项目的scss了:

1
2

$ sass --watch stylesheets/sass:stylesheets

用app管理而不是命令行

到目前为止, 我们所遇到的命令行都是非常简单的, 我非常有信心作为一个以机敏著称的前端工程师对于搞定这些东西是毫无难度的. 那也就意味着, 我下面介绍的这些桌面级的应用将会让这个监控过程变的更加的简单. 无论你对于命令行的舒适程度是什么样的, 都值得一看.

  • Scout Scout是一个免费的工具,同时支持mac和windows, 同时还包含了一个自带的Ruby环境, 可以让你在轻松的点击中管理所有你的sass工程. 换句话说, Scout给了你一个非常好的图形界面来让你操作本来需要命令行实现的监控文件或者文件夹操作.(具体操作介绍略)
  • Codekit 和Scout一样, CodeKit也是一个方便的用图形界面管理你的sass文件的工具, 不过只支持mac系统. 但是它同时支持编译LESS,Stylus,Haml以及CoffeScript,JS和其他的语言. 另外,Codekit还能够优化你的文件和图片,同时还可以自动的重载浏览器~方便你的开发~
  • LiveReload LiveReload可以监控任何文件的更新修改,包含Sass的编译, 以及工作过程中的自动重载浏览器操作. 同时支持Mac和Windows.
    • ......(略)
除了app级的应用外, 还有一些网络框架是支持sass的, 比如ruby on rails, 就可以自动编译Sass文件. 不需要任何的命令行.

所以说,你可以发现即便你对命令行过敏…也有很多备选项可以选择的~虽然我觉得很明显sass并没有任何复杂的命令…

那么, 我们就把Sass安装完成了~而且添加了监控的文件, 那么就我们就可以谈一下输出格式以及注释和嵌套的问题了.

选择一个输出的风格

正如大多数人, 我也是通过看源码来学习网页设计的. 看这个源码来观摩一个网站是如何被有机的整合到一起的是一件非常奢侈的大餐啊. 也正是基于这个原因, 我会非常谨慎的写代码和样式文件: 我声明的方式, 如何关闭标签, 如何用空行来分组等等. 所有的这些看起来都是非必要的, 但是因为我们的css文件可能会成为别人学习的工具和资源, 我们不应该只为实现自己的目的而创作他们.

利用Sass,你基本不会接触你的css文件了. 取而代之, 你主要操作的就是.scss文件, 用户是无法看到这个文件的, 而最终的输出css文件, 很有可能和你偏好的css的结构有所区别…这也是Sass所必须付出的代价..尤其是对于强迫症而言..这也是我最初不愿意用sass的原因之一. 听起来似乎有些不可思议, 但是如果一个样式是我的作品, 我当然很关心它的结构和格式以及最后的呈现.

最终我克服了这个问题, 也因此, 我写了这本书. 究其根本, 格式上的区别也只是个非常微不足道的问题(纯粹是鸡蛋里挑骨头..). sass的输出文件就阅读而言还是完全没有问题的. 实际上, sass也提供了多种不同的输出风格以供选择, 接下来我们就过一下这些风格.

  • Nested 这是默认的风格, sass会把每条规则缩进, 而且结构会和对应的html结构一致. 
    1
    2
    3
    4
    5
    6
    7

    ol {
    	margin: 10px 0;
    	padding: 10px 0; }
    	ol li {
    		font-size: 2em;
    		line-height: 1.4; }
  • Expanded 这是另一种形式, 更像我们通常写的css那样. 对那些希望通过查看你的css源代码来学习的人而言,这种形式会更熟悉一些.

    如下是一个典型的例子(略)

    每一个关闭的括号都会出现在这个声明的最后一部分, 并且新开一行显示. Sass会在每个声明之后插入一个空白行, 虽然是不必要的, 但是除了这个不是问题的问题, 这算是我比较倾向使用的风格. 它非常接近我在不用sass的情况下自己写css的风格(这是非常难得的!).

    为了使用这个风格而不是默认的风格, 我们需要在watch的时候添加一个style的标识:

    1
    2

    $ sass --watch --style expanded screen.scss:screen.css
    • <li>Compact(简约)

    简约风格将会把一个声明的的所有部分都整合一起输出,不在期间分段;
    示例如下:

    1
    2
    3

    ol { margin: 10px 0; padding: 10px 0; }
    ol li { font-size: 2em;	line-height: 1.4; }
    <li>  Compressed(极简)

    第四种也是最后一种风格就是极简风格了, 会去掉所有的空格和空行来减小样式文件的体积. 但缺点就是难以阅读, 不过这也是可以理解的..毕竟极简的目的就是高效率, 而不是为了让人方便.
    例子如下:

    1
    2
    3

    ol{margin:10px 0;padding:10px 0;}ol li{font-size:2em;line-height:1.4;}
    /* 准确说应该是去除所有非必须的空格和空行 */

    如果需要使用这种风格, 制定方式和之前的expanded是一致的:

    1
    2

    $ sass --watch --style compressed screen.scss:screen.css

    浏览器实际上本来就不需要空格和空行的, 所以为什么不去掉这些东西来进一步压缩体积呢? 我只能说这种方式非常不利于他人从代码中学习, 但是对于那些很大的样式文件, 每一个byte都需要考虑的时候, sass引入这种风格就是非常值得肯定的了.

      极简风格对于那些高流量的app而言是非常适合的. 因为这个时候任何文件的展示都是非常关键的. 而对于常规的个人博客之类的东西, 就相对而言没有那么重要了, 反而是更适合人类阅读的模式更加适用, 可以方便那些希望通过观摩的css源代码来学习的人~

值得一提的是, 随着查看元素的工具在浏览器中的普及, .css文件的格式不再像几年前那样的重要了. 预期去看一个css文件, 你完全可以用浏览器内置的分析工具, 去查看一个网站的结构,获得更加强大的功能体验, 更清晰的了解css是如何影响网页布局的, 这些工具将会把css用更加方便阅读和理解的形式展现出来, 而不局限于css文件本身.

不管你选择的是什么风格来输出你的css文件, 它对于你自己的工作流程是没有很大影响的. 因为你的世界里只有scss文件, 你完全可以在scss文件中延续你css中的风格~ 所以说, 对待scss文件的时候就要像对待你最终的完美产品一样对待, 来让scss输出可以让计算机和人类理解的样式.

不要编辑你的输出结果

针对这一点, 需要特别注明的就是当你使用sass的时候, 你就再也不用编辑任何的.css文件了. 你所依赖的只有.scss文件. 因为你对你的.css文件的任何操作最终都会被下一次更新.scss文件时重新编译的css文件覆盖掉. 所以说, 不要管什么css文件了, 只关注你眼前的scss文件就行了.

既然我们有了工作流, 那就让我们开始吧

我们已经说完了如何设置sass. 我们也说了下如何把sass添加到你的工作流程之中, 包括命令行和第三方软件的方式~ 最后, 我们也说明了下关于选择一个合适的sass输出风格. 我们现在就做好准备去使用sass了, 充分享受一下sass的加入以及随着项目的复杂而变得越来越明显的省时的特性!

走起~ Next Chapter–3-USING SASS

readings译系列翻译文章HCIBibSassSass for web designers

Related Posts: