#142：论坛模块样式

在论坛的右侧有一系列模块。“模块”在视觉上，“模块”在代码中，“模块”在它们包含的内容是相关的组，与其他模块中的内容是分离/不同的。

我们首先查看的是“类别”模块。Vanilla Forums 实际上将这些模块放在一个名为“modules”的文件夹中，这很方便。这个特定的模块，正如你可能猜到的，是“categories.php”。

我们找到输出标题的位置，给它添加一个类，然后开始设置样式。我们只是添加了一点底部边距，这对于这个标题来说是合适的，但不是每个 <h4> 都是这样。

然后开始设置容器本身的样式。在 Vanilla Forums 中，模块往往有一个名为“Box”的类名。我们的模块 HTML 类是“module”。我们可以开始查找 Vanilla 中的每个模块并添加我们自己的类。有些时候我感觉自己有能力应对这个挑战，有些时候我只是说“聪明地工作，而不是努力工作。”今天我们将聪明地工作。我们将在 Sass 中创建一个占位符选择器，它具有模块的样式，但不会重新创建我们现有的 .module 类。

%fake-module {
  background: white;
  padding: $padding;
  clear: both;
  box-shadow: 0 0 5px rgba(black, 0.2);
  margin: 0 0 $padding 0;
  position: relative;
}

占位符选择器本身不会输出任何 CSS。但它们可以被 @extend。因此，现在我们可以让所有 Vanilla 风格的盒子都具有我们的模块样式。

.Box {
  @extend %fake-module;
}

我们了解到 whiteSmoke 是一种很棒的颜色。

在 Vanilla 为我们提供的类别列表的标记中，它为我们提供了一个“active”类，以便我们可以稍微更改样式，并使用户当前所在的类别一目了然（因为此模块在许多页面上，包括主页和类别页面）。

我们遇到一个小问题，使用 -$variable 没有正确工作，我们不得不使用 -#{$variable} 来代替。这只是关于 Sass 或 Ruby 或其他什么的其中一个问题。

在大约 10:30 处，我解释了 CSS 三角形的工作原理。我们正在考虑在活动类的左侧使用一个三角形，正如我们的线框图所示。

最后，我们将线程数量定位到右侧，以便用户了解该类别的规模。