使用Sass增强样式
Sass 是什么
Sass 是一个 CSS 预处理器,意即首先编写 Sass 代码,然后经过处理变成浏览器能理解的 CSS。
你可以把 Sass("Syntactically awesome style sheets" 的简称)看成 CSS 的一种简写形式,需要编写的代码量更少。
使用 Sass 的过程中涉及两种不同类型的文件,一种是 Sass 文件,扩展名为 .scss
;另一种时候 CSS 文件。其实,我们只需编辑.scss
文件,Sass 的预处理器会自动把 Sass 文件转换成常规的 .css
文件
网站和样式表变大、变复杂后,使用 Sass 有几个好处:
- Sass 把 CSS 代码分到多个较小的文件中。目前,Web 设计师都知道要尽量使用少量的 CSS 文件。浏览器要加载的文件越多,访客感觉起来网站越慢,因为访客必须等待浏览器从 Web 服务器下载完每一个文件。
因此,有些 Web 设计师会在一个样式表中放几百,甚至几千个样式。这样做节省了网站访客的时间,可是对于我们自己来说有点不方便。如果想找到装饰“关于我们”页面中侧边栏里的<h2>
标签的样式,有点难度。
而使用 Sass 则可以按照一定逻辑,把样式分到多个较小的文件中,例如,网站中表单使用的样式放在一个 Sass 文件中,版式规则放在另一个 Sass 文件中。 Sass 做预处理操作时,会自动把多个较小的文件合并成一个 CSS 文件,以便提升加载速度。此外,Sass 还能压缩最终得到的 CSS 文件,这比自己动手创建的文件小得多 - 可以轻易更新共用的值。我们会发现自己经常不断地使用相同地 CSS 值。例如,你的公司可能规定了官方用色,做 Web 设计时要保持文本、背景、边框等使用一致的颜色。如果市场决定更换颜色呢?
使用常规的 CSS 文件时,我们要找到每一处需要修改的颜色。而使用 Sass 时,我们可以在一个地方定义颜色值,然后在各个样式中使用。如果颜色变了,只需在 Sass 文件中修改一个地方,Sass 就能自动把旧颜色换成新颜色 - 编写的代码量更少。Sass 提供了一些特别强大的工具,能减少编写的代码量。记得旋转元素时要使用很多厂商前缀吗?为了让多个浏览器支持同一个属性,要编写多行代码,真是麻烦。
这种杂活可以交给 Sass 混入(mixin)。使用混入,我们只需编写一行代码,Sass 会将其转换成所有带有厂商前缀的版本。 此外,如果发现自己要在多个不同的样式中使用相同的 CSS 属性,可以让 Sass 自动添加那一部分代码。编写的代码少了,我们的效率就会提升,而且出错的几率更小。
使用 Sass 还有很多其他好处。总之,Sass 可以提高 Web 设计师的效率,让我们以更快的速度工作,把更多的时间用在思考设计上,而不是输入代码
注意: 关于 Sass 的更多信息,可以访问 www.sass-lang.com
不过, Sass 也有些缺点。首先,Sass 引入了多个新概念,以及编写 CSS 的新句法
其次,为了使用 Sass,要在电脑中安装几个软件。Sass 依赖 Ruby 编程语言,因此我们需要安装 Ruby,以及 Sass 命令相关的基本文件。此外,Sass 不是常规的程序,不是双击就可以启动的。
我们必须使用命令行才能启动 Sass。命令行让很多 Web 设计师为难,但是不应该这样,其实命令行特别易于使用