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)})"; 

小范围，中程，大范围，等等都是您的断点。您只需更改这些值或添加更多断点即可。