使用 Sassy 模块在 Drupal 中快速集成 SCSS（SASS）

SASS/SCSS 早已成为编写 CSS 代码的标准。如果您还没有在自己的网站中使用它，那么现在正是时候。通过 Sassy 模块可以非常快速地连接 SCSS，而且即使在共享主机（shared hosting）上也能工作，因为 CSS 文件的编译是通过 PHP 库完成的。

我们开始吧。我这里有一个带有 Zen 主题的干净 Drupal。首先需要安装 Sassy 模块：

https://www.drupal.org/project/sassy

Sassy 模块需要 Prepro 模块来编译 CSS：

https://www.drupal.org/project/prepro

还需要安装 Libraries API 模块，用于连接 Sassy 所需的库：

https://www.drupal.org/project/libraries

最后还需要 PHPSass 库，它会将 SCSS 代码编译成 CSS。请下载最新的 “Download ZIP” 版本：

https://github.com/richthegeek/phpsass

将该库复制到 sites/all/libraries/phpsass 文件夹中，使文件路径如下：
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php
等。

启用所有模块。现在可以添加 SCSS 文件了。我的子主题名为 sitemade，因此我打开 sitemade.info 文件，并添加以下内容：

stylesheets[all][] = css/styles.scss

如您所见，只需将文件扩展名改为 .scss，其他部分与普通 CSS 文件相同。然后创建 css/styles.scss 文件并清理缓存。就这样！文件将自动加载并生效。

如果出现错误，请检查 files 文件夹权限是否为 777，并确保“状态报告”中没有错误。接下来我们将介绍 Drupal 针对 SCSS 的设置以及 SCSS 的核心功能。

Sassy 模块的工作原理

当我们连接 SCSS 文件后，Sassy 模块会生成对应的 CSS 代码，而 Prepro 模块会将其保存到默认路径 sites/default/files/prepro 下。

为了避免在每次打开页面时都重新生成 CSS（对生产站点尤其重要），请在 Prepro 模块的设置页面中关闭缓存：

/admin/config/media/prepro

默认情况下缓存是关闭的，因此 CSS 会在每次页面加载时重新生成。这一过程非常快，因此可以方便地实时修改 SCSS 并立即看到效果。

Mozilla Firefox Firebug + FireSass

配合 Firebug 和其扩展 FireSass 使用非常方便。它能显示 SCSS 源文件中对应代码的行号：

如果未安装该扩展，则只能看到编译后的 CSS 文件中的行号。

要启用 FireSass，请在 Prepro 模块设置页面勾选以下选项：
/admin/config/media/prepro

Pass @warn and @debug to Watchdog
Include debug information in output

SCSS 的功能

关于 SASS/SCSS 的所有功能，可以查看官方网站：

http://sass-lang.com/

SCSS 的主要特性是嵌套语法（Nesting）。

嵌套结构

SCSS 允许编写更简洁、可读性更高的代码，无需重复父级类名。例如：

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
    }
 
    .li-1 {
      background: red;
    }
  }
}

相比传统的 CSS，这种写法更短更清晰：

#menu-1 {
  margin-top: 20px;
}
 
#menu-1 ul {
  margin-left: 0px;
}
 
#menu-1 ul li {
  width: 100px;
  display: inline-block;
}
 
#menu-1 ul li.li-1 {
  background: red;
}

现在假设我们还要为 <li> 内的 <a> 标签及其中的 <span> 编写样式，SCSS 可以通过层级结构轻松实现：

#menu-1 {
  margin-top: 20px;
 
  ul {
    margin-left: 0px;
 
    li {
      width: 100px;
      display: inline-block;
 
      a {
        text-decoration: none;
 
        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }
 
    .li-1 {
      background: red;
    }
  }
}

还可以使用“&”选择器实现 :hover 等伪类效果：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译后生成：

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
  font-weight: normal; 
}

变量（Variables）

另一个非常有用的特性是变量。您可以定义网站的配色方案和尺寸变量，然后在样式中直接调用：

$red: #fa0a0a;
$blue: #0a0afa;
$green: #0afa0a;
 
$content: 1200px;
$sidebar: 250px;
 
.sidebar {
  width: $sidebar;
  float: left;
  background: $red;
}
 
.content {
  width: $sidebar;
  margin-left: $sidebar;
  background: $blue;
}

函数（Mixin）

在 SASS 中还可以定义类似函数的结构，称为 Mixin：

@mixin blue-button {   
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
 
  &:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
}
 
.form-submit {
  @include blue-button;
}