基金會SASS

Question

我正在嘗試使用SASS的新基金會6框架，但我努力瞭解網格系統。基於文檔和其他例如在我看到我所做的事情應該是一個簡單的2,1格：

@import 'foundation'; 

/* CUSTOM STYLES */ 

.container { 
    @include grid-row(3); 
    main { 
     background: $primary-color; 
     @include grid-column(2); 
    } 
    aside { 
     background: $primary-color; 
     @include grid-column(1); 
    } 
} 

由於某種原因導致的：

電網問題

Answer 1

您可以修復這兩種方法。首先是在您的主app.scss文件中包含foundation-global-styles。下面是一個例子app.scss文件：

@charset 'utf-8'; 

@import 'settings'; 
@import 'foundation'; 

@include foundation-global-styles; 

如果你不想包括所有的基金會的全球風格，修復此問題的特定CSS規則是：

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

這條規則使所有的元素包括：填充和邊框尺寸的寬度和高度計算。如果您將基金會的Global Styles包括在內，您可能會遇到更少的障礙，因爲它們大部分是爲了提高瀏覽器間的一致性而進行的一系列重置。

---

注：我刪除了我的其他答案這個答案查明的CSS，這是問題的根源。

Answer 2

使用 需要 'zurb基金會' 在ruby.config

參考http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html