《Sass for Web Designers》之Sass的工作流程

本系列由zEx根据DAN CEDERHOLM的新书《SASS FOR WEB DESIGNERS》所译,整个系列共分四章,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息。

——作者:DAN CEDERHOLM

——译者:zEx

Sass for Web Designers

第一章第三章

现在我们知道了什么是Sass,那我们就开始使用它来创建样式吧。我们的第一个任务就是在你的电脑上安装Sass。我在第一章提到过Sass是用Ruby编写的程序,并且使用Ruby来编译成CSS。所以,在我们使用Sass之前,我们需要安装Ruby。

在苹果电脑(MAC)上安装Sass

如果你有一台MAC电脑(那你应该高呼万岁,你是这么的幸运),那么安装就会变得更简单。MAC OS X系统预安装了Ruby和Sass需要用到的包管理命令–gem命令。

打开“终端“(不要害怕,没什么难的命令需要你输入),输入下面的命令:

$ gem install sass

这个命令很简单,对吧?在你输入上面的命令并回车后,你会在”终端“上看到下面这些信息快速的流过你的窗口:

Fetching: sass-3.2.10.gem (100%)
Successfully installed sass-3.2.10
1 gem installed
Installing ri documentation for sass-3.2.10...
Installing RDoc documentation for sass-3.2.10...

Fetching: sass-3.2.10.gem (100%) Successfully installed sass-3.2.10 1 gem installed Installing ri documentation for sass-3.2.10... Installing RDoc documentation for sass-3.2.10... 看到这些信息,那么恭喜你,你已经安装成功了!

在写这本书的时候,官方最新发布的Sass的版本是3.2.10,使用终端,我们可以很方便的升级。

安装最新发布的版本

你可以通过在命令的最后添加 ”--pre“ 参数来选择安装最新的alpha版本的Sass。尽管使用最新的alpha版本并不安全,但是却有让你使用最新的函数的优势。

为了安装好最新最好的版本,需要在”终端“中输入下面的命令:

$ gem install sass --pre

这时你又看到了下面的信息流过你的”终端“窗口,这时确认你已经安装好了3.3.0的alpha版本。

Fetching: sass-3.3.0.alpha.3.gem (100%)
Successfully installed sass-3.3.0.alpha.3
1 gem installed
Installing ri documentation for sass-3.3.0.alpha.3...
Installing RDoc documentation for sass-3.3.0.alpha.3...

现在你已经更新到了最新的版本,我要向你的勇气致敬。

在windows中安装Sass

与Mac OS X系统不同,windows系统并没有预装Ruby。Sass的官方网站建议windows用户在你的系统中安装Ruby包。一旦你安装好了Ruby,你就可以继续看这一章后面的部分了。

告诉Sass监控修改过的文件

好的,我们已经安装好了Sass,接下来要干什么呢?那就是,我们需要告诉Sass使用“watch”命令来监控的文件。我的意思是当我们每次一修改样式表然后保存的时候,我们想让Sass监控这个被修改的.scss,发现有修改就编译成浏览器可以读取的.css文件。下面介绍几个方法:

+通过命令行输入一个简单的命令。 +使用桌面app(或几个app)来帮助你管理你的Sass文件和输出的css文件。

首先让我们先来学习一下命令行的用法。不要害怕,很简单的。原理就是使用命令告诉Sass去监视一个指定的.scss文件,如果有修改就进行编译转成一个指定的css文件。

举个例子:

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

在你运行了上面这条命令之后,Sass就会开始监控screen.scss这个文件的任何改动。在上面这条命令输入并回车后,你将会在你的“终端”窗口看到下面这条信息。

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

如果.scss文件更新了,Sass将会自动覆盖掉screen.css。换句话说,每次你在Sass的文档中进行保存,CSS就会马上进行更新。

文件名称并不会进行匹配,例如下面这个例子,也同样会工作,不会发生报错。(它可能会有些混乱)

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

此外,SCSS文件和CSS也可以不保存在同一目录下。事实上,我发现这对于我要将SCSS文件和CSS文件进行分离是非常方便的。这不是一个需求,但却保证了文件存放目录结构的清晰。

Sass文件的组织

图2.1显示了一个典型的设置,我就是这样设置我的文件目录结构的,一个主stylesheets目录,这个目录下面包含了经Sass编译过的.css文件和一个包含了所有.scss文件的sass目录。

Sass for Web Designers

图2.1:一个典型的Sass文件目录组织结构。

你也可以指定Sass监视整个文件夹,而不是只监视一个样式表。所以使用上面的文件结构,我可以在我的项目中使用“watch”命令监视所有.scss文件的改动。(上图提供的例子里当前文件夹中包括了样式表文件夹和图片文件夹)。

$ sass --watch stylesheets/sass:stylesheets

使用App替代命令行来进行管理

我们回过头来看一下学过的命令都是极其简单的,并且我相信你是一个聪明的前端开发,可以轻易的将这些加入到你的工作流程中。即便如此,还有一些桌面应用可以帮助你更轻松的管理监视和输出Sass文件.它的价值就在于你可以不用管命令行,可以更舒服的使用Sass。

Scout

Scout是一款在Mac和windows平台上都免费使用的桌面应用,它提供了“自包含Ruby环境,只要手动点击,就可以让你毫不费力的管理你所有的Sass项目。”换句话说,Scout给了你一个比命令行要友好的可视化界面,来帮助你建立需要监视的目录和文件(图2.2,图2.3)。

Sass for Web Designers

图2.2:Scout的网站

Sass for Web Designers

图2.3:Scout简单安装设置界面

一旦你选择好了输入和输出文件夹,只需在你想要监控的项目上点击播放按钮,Scout就会开始监控这些文件。在“log”这个tab下的终端窗口会显示更新的信息(图2.4)。

Sass for Web Designers

图2.4:一旦Scout开始监视你的Sass文件,“log”这个tab下就会一直保持编译状态,更新你的信息。

Scout是一款简单方便,完全避免使用命令行的桌面应用。(如果你是使用Windows系统,使用这个应用就可以省去了安装Ruby的麻烦。)

CodeKit

像Scout一样,CodeKit(只有Mac电脑可以安装)也是使用一个简单的GUI界面来帮助你编译你的Sass文件。这款应用还可以编译LESS,Stylus,Haml,CoffeeScript,JavaScript等等语言。CodeKit另外一个亮点是它可以压缩文件和图片,并且自动刷新你当前正在开发项目的浏览器页面(图2.5)。

Sass for Web Designers

图2.5:CodeKit网站

有关于Codekit的详细使用可以阅读早前发布的《SASS界面编译工具——Codekit的使用》一文。——@大漠

LiveReload

LiveReload可以监视所有文件的修改,包括Sass的编译,以及自动刷新你当前工作的浏览器页面。这款应用软件在Mac和Windows系统下都可以使用(图2.6)。

Sass for Web Designers

图2.6:LiveReload网站

Compass.app

Compass.app是一款在Mac的菜单条上显示的应用软件,并且在Windows,Linux下也都可以使用。它可以帮你监控和编译你的Sass文件(图2.7)。

Sass for Web Designers

图2.7:Compass.app网站

除了这几个GUI工具之外,国内还有一款有名的工具Koala。同样具有上述GUI工具功能。——@大漠

SASS界面编译工具——Codekit的使用

有关于Koala工具的详细介绍可以点击《SASS界面编译工具——Koala的使用》一文。

除了上面介绍的桌面应用软件之外,一些开发框架也内置了Sass。例如Rails,当样式表被修改的时候,Rails就会自动将Sass文件转成CSS文件。而且还不需要命令行输入。

所以,尽管你有一些对于命令行感到害怕的理由,但我希望通过上面的介绍打消了你的顾虑,因为需要用到运行Sass的命令几乎没有,就算有也不复杂。

现在我们已经安装好了Sass并且准备好监视Sass文件了,那么接下来就让我们继续学习输出格式,打注释,和嵌套的使用吧。

选择输出样式的风格

和你们许多人一样,我也是通过查看源代码来学习网站设计的。但因为有压缩,书写凌乱等原因,要查看这个网站的是怎么搭建起来的是一件很奢侈的事情。因此,我总是将我的标签和样式写的很规整:标签我采用闭合标签然后逐级缩进的方式,样式我是采用一行书写,每个属性之间用空格分隔等等。以上这些看起来并不需要做的这么讲究,但因为我们写的CSS可能是别人学习的工具,所以我们并不能只考虑到自己的方便,利益来书写CSS。

对于Sass来说,你不再书写.css文件。相对应的,你是在编写别人看不到的.scss文件,并且Sass最终的输出的.css文件格式可能会和你书写Sass的格式设置不一致。自从我使用了Sass,就帮助我改掉了严格控制格式按照上面说的方法书写的毛病(典型的强迫症)。这听起来有些可笑,但如果把样式表比作是我们制作出来的商品,那么我会非常关心它的格式和组织结构的。

最终,正是因为我克服了上面的毛病,所以我才会写这本书。最后,对于追求格式的统一完全是吹毛求疵。最终产生的结果文件仍然对人具有极高的可读性。事实上,Sass提供了几种输出风格给你选择,现在让我们就来学习一下吧。

嵌套型 nested(css代码默认输出的风格)

Sass默认吐出的CSS代码风格是嵌套的,每一个样式规则和HTML的结构保持一致,都是子节点缩进,样式的属性相对于隶属的选择器也缩进。

下面是一个嵌套风格输出的样式:

ol {
    margin: 10px 0;
    padding: 10px 0;}
    ol li {
        font-size: 2em;
        line-height: 1.4;}
        ol li p {
            color: #333;}

展开型 expanded

展开式风格是和传统手写样式表更接近,更典型的一种。对于那些查看你令人惊讶的CSS的源码的人来说,这种格式让人更觉得亲切。

下面是一个展开型风格输出的样式:

ol {
    margin: 10px 0;
    padding: 10px 0;
}
ol li {
    font-size: 2em;
    line-height: 1.4;
}
ol li p {
    color: #333;
}

每一个闭合的括号都出现在这个样式的单独最后一行。Sass会在每个样式声明中间插入一个空行,虽然看起来可有可无,但对挑剔的人来说可不是这样,并且我喜欢在我的项目中使用这种风格。因为这和我不用Sass,采用纯手写CSS的格式非常接近(尽管我采用纯手写的机越来越少了)。

对于使用展开式风格替代默认的嵌入式风格,我们只需要输入简单的命令告诉Sass监视的文件即可:

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

紧凑型 compact

紧凑型风格把每一个样式声明和选择器放在了同一行上。这个的好处就在于你可以轻松的只用眼睛扫描左侧,就可以寻找到一组样式表。因为一行就是一组样式,用行来进行两个样式声明的分隔。就我个人而言,我发现它很难找到一个特别的样式声明,但是我甚至看到过一些手写CSS的疯狂CSS-er在他们的代码中使用这种格式,因为他们想在可读性和压缩比中寻找平衡点。

下面是紧凑型风格输出的样式:

ol { margin: 10px 0; padding: 10px 0;}
ol li { font-size: 2em; line-height: 1.4;}
ol li p { color: #333;}

下面的代码展示了如何使用Sass命令指定输出紧凑型样式:

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

压缩型 compressed

第四种,也是最后一种风格是压缩型,这种类型会移除所有空格和空白行来减少样式文件的大小。它基本上不能进行阅读,但这是有意而为之:压缩型风格追求的时效率,而不是人们的可读性。

让我们举例来说明:

ol{margin:10px 0;padding:10px 0;}ol li{font-size:2em;line-height:1.4;}ol li p{color:#333;}

下面的代码展示了如何使用Sass命令指定输出压缩型样式:

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

浏览器不需要空格和空行,所以为什么不把他们去除来节约带宽呢?虽然我对这种不利于帮助别人学习的风格持反对意见,但对于大型的样式表或样式库来说,节省每一个字节都很重要,所以,对于Sass包含了这个选项,还是很不错的。

对于高交换频率的web app来说,提供压缩样式是非常适合的,因为对每个文件的可以进行性能优化的地方进行优化都是很重要的。对于个人网站来说这个可能就不那么重要了,对于那些想查看你源代码学习的人来说,一个可读性高的样式可能会是更好的选择。

随着浏览器自带的“审查元素”这类探测器工具的普及,流行,对于.css文件格式的要求就没有前几年那么重要了。如果你要查看某一个样式,只需要使用浏览器带的“审查元素”,你就可以看到CSS的结构,并且将CSS以可以轻松阅读的格式呈现出来。

不论你选择哪种CSS的输出方式,都不会影响你的工作流程。因为你只是在.scss文件中编写,所以你可以按照你习惯的格式来书写。那么就让.scss文件按照你自己喜欢的方式书写,让Sass来帮你编译出浏览器(或人们)可以明白的的样式表就可以了。

不要编辑你的输出文件!

这里有一点需要非常注意,当你使用Sass的时候,你就不要再编辑任何的.css文件了。你只要在.scss文件中进行书写或修改就可以了。因为你在.css文件中做的任何修改,最终都会在下一次你更新.scss文件,并且让Sass编译输出的时候被覆盖掉。所以请坚持在.scss文件中进行所有操作,忽略掉它输出的东西吧。

我们已经知道了工作流程,接下来就让我们开始工作吧

我们已经讨论过了怎么建立一个Sass。我们也已经讨论过了通过使用命令行和第3方应用软件来将Sass添加到你的工作流程中。最后我们还讨论了为你的Sass转成CSS需要选择哪一种的输出样式。我们现在已经准备开始使用Sass,并将省时特性的优势注入到我们每天越来越多的复杂的web项目中。接下来让我们开启第3章吧。。。

第一章第三章

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

中文出处:http://zciwp.github.io/c2/

w3cplus地址:http://www.w3cplus.com/preprocessor/sass-for-web-designers-chapter-2.html

Mercurial Superfly CR7 High

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-for-web-designers-chapter-2.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部