前言
SASS 是一种 CSS 预处理器，它可以让我们写出更加优美、简洁、易于维护的 CSS 代码。而 compass 则是 SASS 的一个函数库，它提供了一系列的功能，可以帮助我们更加方便地开发前端项目。
本文将介绍 compass 的基本使用方法，以及一些常用的功能，希望能够帮助大家更好地使用 compass 进行前端开发。
安装 compass
首先，我们需要安装 compass。在命令行中输入以下命令：
gem install compass
如果你使用的是 Mac 或者 Linux 系统，可能需要在命令前面加上 sudo。
安装完成后，我们可以使用 compass -v 命令来检查是否安装成功。
使用 compass
安装成功后，我们就可以在项目中使用 compass 了。
首先，我们需要在项目的根目录下创建一个 config.rb 文件，这个文件是 compass 的配置文件。在 config.rb 文件中，我们可以设置一些 compass 的参数，例如输出目录、源文件目录、图片目录等等。
下面是一个 config.rb 文件的例子：
# 设置源文件目录 sass_dir = "src" # 设置输出目录 css_dir = "dist" # 设置图片目录 images_dir = "images"
在 config.rb 文件中，我们还可以引入 compass 的库，例如：
require "compass/import-once/activate"
这个库可以让我们在 SASS 中使用 @import 导入文件时，只导入一次，避免重复导入。
在 config.rb 文件中，我们还可以设置一些 compass 的选项，例如：
# 设置输出格式为压缩格式 output_style = :compressed # 设置是否启用调试信息 line_comments = false
以上是一些常用的选项，更多的选项可以查看 compass 的官方文档。
在设置好 config.rb 文件后，我们就可以在项目中使用 compass 了。
首先，我们需要在 SASS 文件中引入 compass：
@import "compass";
这样就可以使用 compass 中的函数和 mixin 了。
常用功能
1. 边框圆角
在 CSS 中，我们可以使用 border-radius 属性设置一个元素的边框圆角。在 compass 中，我们可以使用 border-radius mixin 来实现这个功能。
使用方法如下：
.rounded {
@include border-radius(10px);
}这样就可以将一个元素的边框设置为 10px 的圆角。
2. 盒子阴影
在 CSS 中，我们可以使用 box-shadow 属性为一个元素添加一个阴影效果。在 compass 中，我们可以使用 box-shadow mixin 来实现这个功能。
使用方法如下：
.shadow {
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}这样就可以将一个元素添加一个黑色的阴影效果。
3. 渐变背景
在 CSS 中，我们可以使用 background-image 属性设置一个元素的背景图片。在 compass 中，我们可以使用 linear-gradient mixin 来实现渐变背景。
使用方法如下：
.gradient {
@include background-image(linear-gradient(to bottom, #ffffff, #000000));
}这样就可以将一个元素的背景设置为从白色渐变到黑色的渐变效果。
4. 字体图标
在前端开发中，我们经常会使用一些字体图标，例如 FontAwesome、Glyphicons 等等。在 compass 中，我们可以使用 font-face mixin 来实现字体图标。
使用方法如下：
-- -------------------- ---- ------- ---------- - ------------ ------------ ---- ------------------------------------ - ----- - ------------ ------------ -------- -------- -
这样就可以将一个元素的内容设置为 FontAwesome 中的第一个图标。
5. 媒体查询
在前端开发中，我们经常需要为不同的设备设置不同的样式。在 CSS 中，我们可以使用 @media 查询来实现这个功能。在 compass 中，我们可以使用 media mixin 来实现媒体查询。
使用方法如下：
-- -------------------- ---- -------
-------- --------------- -
---- -
------ -----
-
-
-------- -------------- -
---- -
------ ----
-
-这样就可以设置在桌面设备上，.box 的宽度为 100%，在移动设备上，.box 的宽度为 50%。
总结
本文介绍了 compass 的基本使用方法，以及一些常用的功能。希望能够帮助大家更好地使用 compass 进行前端开发。如果想要了解更多的内容，可以查看 compass 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65843137d2f5e1655def19fe