蘇斯與谷歌網絡入門套件

想知道我錯了哪裏？試圖讓Susy使用Google Web Starter Kit。蘇斯與谷歌網絡入門套件

1.克隆GWSK到新目錄。

2.蘭yarn安裝依賴關係。

3.Installed與Susy：

yarn add susy --dev

4.Added到gulplfile：

/* gulpfile.babel.js */ 
.pipe($.sass({ 
    precision: 10, 
    includePaths: ['node_modules/susy/sass'] // Added this

5.In我的風格文件：

/* main.scss */ 
@import 'susy'; 
.content { 
    @include container; 
} 
.col { 
    @include span(4); 
}

6.In準系統html文件：

/* basic.html */ 
<div class="container"> 
    <div class="col">Lorem.</div> 
    <div class="col">Ab.</div> 
    <div class="col">Earum?</div> 
</div>

7.然後gulp serve起來。

然而，當basic.html加載的div不對齊，並沒有錯誤。

來源

2017-06-27 skube

很顯然，我需要添加of 12

.col { 
    @include span(4 of 12); 
}

這和事實，我的CSS選擇是.content不.container。咄。

來源

2017-06-27 11:09:56 skube

'n'語法可以幫助您快速覆蓋全局設置。如果您正在使用Susy，則全局設置爲「4」。所以'12'不會覆蓋全局的'4'，但你也可以改變一次全局設置 - '$ susy：（'columns'：12）;' - 並且不必在每個混音或函數中重寫。 –

我沒有意識到默認值是4.大多數情況下您會聽到12個列網格系統。蘇西是否被拒絕決定是否有一個原因？ – skube

我們選擇它來鼓勵採用移動優先的方法，從4開始，並在屏幕變大時添加列。 –

蘇斯與谷歌網絡入門套件

回答

相關問題