使用 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 功能，羅盤將為你定義。