Skip to content

使用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 设计师为难,但是不应该这样,其实命令行特别易于使用

安装 Sass

Sass 基础知识

使用 Sass 局部文件组织样式

Sass 变量

嵌套选择符

继承(或扩展)属性

混入

处理媒体查询

使用 CSS 源码映射诊断故障