使用 CSS3 与指南针

你可以在此页面上找到支持 CSS3 组件的完整参考

为了在你的项目中使用 CSS3，Compass 提供了 mixins 以支持每个浏览器中的 CSS3 功能。在 Sass / Scss 文件的顶部，你必须指定要使用指南针

@import "compass/css3";

边界半径

在 sass 文件中包含带指南针的 border-radius：

div {
    @include border-radius(4px);
}

CSS 输出

div {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

如你所见，你可以使用普通的 CSS 名称。只需将 @include 放在它前面并使用（）来设置你的值。

Flexbox 示例

.row {
  @include display-flex;
  @include flex-direction(row);
}

CSS 输出

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

结论

这只是两个例子。Compass 提供了更多的 CSS3 mixins。使用 Compass 非常方便，你不必担心忘记为指定的浏览器定义 CSS3 组件。如果浏览器支持 CSS3 功能，罗盘将为你定义。