SASS（Syntactically Awesome Style Sheets）是一个 CSS 预处理器，它的出现让 CSS 的编写变得更加简单、易于维护。同时，Compass 是 SASS 的一个框架，它为 SASS 提供了许多有用的、可重用的 Mixin 和函数。下面将介绍 SASS 和 Compass 的基本用法以及如何将它们应用于 Web 应用的开发。
安装 SASS 和 Compass
在使用 SASS 和 Compass 构建 Web 应用之前，我们需要先安装它们。SASS 可以通过 RubyGems 安装，而 Compass 可以通过命令行安装。详细步骤请参见以下命令：
gem install sass gem install compass
SASS 基础语法
SASS 与 CSS 的区别在于它支持变量、嵌套规则、Mixin 和继承等高级功能。下面是 SASS 的基础语法：
变量
SASS 中变量以 $ 符号开始，可以赋值任何样式值，并在需要时引用它们。例如：
$primary-color: #0099ff;
body {
background-color: $primary-color;
}嵌套规则
SASS 允许我们使用嵌套规则，这使得我们可以更好地组织样式表。例如：
-- -------------------- ---- -------
--- -
-- -
-------- --
----------- -----
-- -
-------- -------------
-
-
- -
------ -----
---------------- -----
------- -
---------------- ----------
-
-
-Mixin 和继承
Mixin 和继承使得样式表的复用变得更加容易。Mixin 允许我们定义一组样式，然后在需要的地方重用它们。继承允许我们从另一个选择器中继承样式。例如：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - -------- - -------- ------------------- - ------ - ------- --- ----- -------- ------- --------- -
Compass 基础用法
Compass 是 SASS 的一个框架，它为 SASS 提供了许多有用的、可重用的 Mixin 和函数，让样式开发变得更加容易。下面是 Compass 的基础用法：
CSS3 Mixin
Compass 支持许多 CSS3 Mixin，例如：
.box {
@include border-box;
@include box-sizing(border-box);
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
@include transition(all 0.2s ease-in-out);
}Sprite
Compass 的 Sprite 支持可以自动地将多个小图片合并成一张大图，并生成相应的 CSS。例如：
-- -------------------- ---- ------- ------- -------------- -------- ------------------ -- --- --- ----- - -------------------- - -- ------ ----- ------- ----- - ---------- - -------------------- - ------ - ----------- - -------------------- - ------ -
Typography
Compass 为字体设置提供了很多选择器和 Mixin，例如：
@include text-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
@include word-wrap;
@include hyphenation;
@include link-colors(#ff0000, #00ff00, #0000ff);
@include font-face('Droid Sans', font-files('droid-sans.ttf', 'droid-sans.woff', 'droid-sans.svg', 'droid-sans.eot'));应用
将 SASS 和 Compass 应用于 Web 应用的开发，需要以下步骤：
步骤 1：创建 SASS 文件
创建 SASS 文件，扩展名为 .scss。它们可以在开发环境中使用。例如：
-- -------------------- ---- -------
-- ----------
------- ---------------
------- ----------------------------
------- --------------------------
--------------- --------
---- -
------ -----
----------------- -----
-- -
-------- --
----------- -----
-
- -
------ ---------------
---------------- -----
------- -
---------------- ----------
-
-
-
---- -
-------- -----------
-------- -----------------------
-------- ------------ --- --- ------- -- -- ------
-------- -------------- ---- -------------
-
------- --------------
-------- ------------------
------- -------------步骤 2：编译 SCSS 文件
使用命令行进入 SASS 文件所在目录，执行以下命令：
sass style.scss style.css
它将编译 style.scss 文件为 CSS 文件 style.css。
步骤 3：引用 CSS 文件
在 HTML 文件中引用 style.css 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --- -----------
----- ---------------- -----------------
-------
------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---- ------------
---- -- - ----
------
----- ----------- ------------------
------------- ------------
-------
-------步骤 4：在开发环境中使用 SASS 和 Compass
在开发环境中，可以使用 SASS 和 Compass 提供的自动编译功能、文件监听功能和服务器功能，以提高开发效率。例如：
sass --watch style.scss:style.css
以上命令将自动编译 style.scss 文件并监视其变化，当它被修改时，自动重新编译为 CSS 文件 style.css。
sass --listen
以上命令将开启一个 SASS 服务器，它可以自动地编译 SASS 文件为 CSS 文件，并将其提供给浏览器。浏览器中修改的文件也将被自动重新编译。在此模式下，可以使用 http://localhost:8080/style.scss 访问编译后的 CSS 文件。
总结
SASS 和 Compass 是为 Web 应用开发提供的基础工具。使用它们可以让 CSS 的编写更加简单、易于维护。通过本文的介绍，希望读者可以掌握 SASS 和 Compass 的基础用法，并将其应用于 Web 应用的开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64882ef248841e98946b0795