Foundation + SASS/SCSS 自定义尺寸答案

【问题标题】：Foundation + SASS/SCSS customize sizesFoundation + SASS/SCSS 自定义尺寸
【发布时间】：2014-05-02 10:05:38
【问题描述】：

在 Foundation 框架中，您可以为预定义的屏幕尺寸设置 dom 元素的行为，例如：小、中大等。出于特定原因，我想创建自己的尺寸，但预定义的尺寸除外。怎么可能呢？谢谢。附：我阅读了有关媒体查询的内容：http://foundation.zurb.com/docs/media-queries.html 但我不明白如何使用它（更新_settings.scss 做什么不明白）。

【问题讨论】：

您看对了地方。您必须学习一些 SCSS sass-lang.com 才能了解发生了什么。基本上你可以覆盖框架给定的变量的值。

标签： css sass zurb-foundation

【解决方案1】：

您需要确保您了解 Sass 以及将您的 sass 文件编译成 css 的程序。我用 Compass 编译，所以看看那个。

完成后，安装 Foundation 并开始查看您的 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)})";

小范围、中范围、大范围等是你的断点。您需要做的就是更改这些值或添加更多断点。

【讨论】：

嗨，我明白了，但是如果我需要创建新的维度，例如“xxs-small”，该怎么办。如果我想使用这个参数来设置这样的列的行为：xxs-small-8。可能吗？谢谢。