Foundation + SASS/SCSS自定義大小

Question

在Foundation框架中，您可以爲dom-elements設置預定義屏幕大小的行爲，例如：小，中等大小等。我想創建自己的大小，除了預定義，出於我的具體原因。如何做到這一點？謝謝。 P.S.我讀了關於媒體查詢：http://foundation.zurb.com/docs/media-queries.html，但我不明白如何使用它（更新_settings.scss做什麼沒有明白）。

Answer 1

您需要確保您瞭解Sass和一個將您的sass文件編譯爲css的程序。我使用Compass進行編譯，請看看這個。

一旦你有了它，安裝基礎並開始觀看你的sass文件;看着你的文件將它們轉換成CSS。

您應該看到一個名爲_settings.scss的部分文件（它們前面有一個下劃線）。這個文件的99％都被註釋掉了。尋找這個部分，並取消它：

$small-range: (0em, 40em); /* 0, 640px */ 
$medium-range: (40.063em, 64em); /* 641px, 1024px */ 
$large-range: (64.063em, 90em); /* 1025px, 1440px */ 
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */ 
$xxlarge-range: (120.063em); /* 1921px */ 

$screen: "only screen"; 

$landscape: "#{$screen} and (orientation: landscape)"; 
$portrait: "#{$screen} and (orientation: portrait)"; 

$small-up: $screen; 
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; 

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; 
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; 

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; 
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; 

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; 
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; 

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; 
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; 

小範圍，中程，大範圍，等等都是您的斷點。您只需更改這些值或添加更多斷點即可。