波旁整洁变量的摘要

在关于Bourbon Neat的最后一部分中，我们将研究它提供给我们的各种“内置” Sass变量。 这将是一小段路程，但是了解如何调整网格很重要。

变数

我们将介绍以下内容：

• 默认布局方向
• 视觉网格不透明
• 边框框大小
• 视觉栅格索引
• 禁用警告
• 视觉网格颜色
• 默认功能
• 网格列
• 最大宽度
• 视觉网格
• 柱
• 排水沟

在开始之前，我应该提醒您，大多数时候，您的Neat变量最好放在一个中央位置，例如您的** grid-settings **中。 在任何情况下，为避免意外，请确保在导入Neat之前先导入此文件_ 。

萨斯：

@import "bourbon/bourbon"
@import "grid-settings"
@import "neat/neat"

可视化网格

让我们从第一天开始就应该使用的东西开始。 Neat可以为您显示可视化网格，使您更容易“看到”您的设计并更好地发现试验机会。

我绝对是那些提倡尽快在浏览器中进行设计的人。 在浏览器中看到布局的网格骨架，可以很容易地将其他图形设计工具抛在后面。

视觉网格

默认情况下，Neat将$visual-grid为false 。 跳转到_grid-settings并将其更改为true以便可以看到它。

萨斯：

$visual-grid: true

您将看到的颜色会有所不同（我已经进行了一些调整），但是它将显示通过$ grid-columns设置的列数 ，所有这些都在外部容器中。

视觉栅格索引

如果您已经有一些内容跨越了页面上外部容器的整个宽度，您可能会惊讶地发现$visual-grid无效。 如果发生这种情况，请记住，默认情况下，将$visual-grid-index设置为back ，将网格放置在布局的后面 （当然，这是一个奇怪的默认值）。

SCSS：

$visual-grid-index: back !default

如果要查看页面内容前面显示的可视网格，只需进行以下更改：

萨斯：

$visual-grid-index: front

视觉网格颜色

如果您对默认的网格颜色不满意，也可以更改它。 选择与您的设计形成鲜明对比的颜色是个好主意。

萨斯：

$visual-grid-color: black

视觉网格不透明

如果您对默认不透明度40％感到不满意，也可以否决。 我相信0.4是默认的不错选择，但是每个项目都是不同的。

萨斯：

$visual-grid-opacity: 0.2

网格列

如果您认为默认的12列网格无法为您提供所需的灵活性或结构，则可以通过此变量全局更改默认值。

让我们来看几个合理的例子：

萨斯：

$grid-columns(6)

萨斯：

$grid-columns(16)

萨斯：

$grid-columns(4)

柱

对于此示例，我们必须退后一分钟。 Neat的网格系统基于黄金分割率，我们可以通过此变量更改单个网格列的相对宽度。 让我们来看看幕后花絮。

SCSS：

$column: modular-scale(3, 1em, $golden) !default;

在内部，它使用modular-scale函数，我也在有关波旁威士忌的各种函数的文章中也进行了描述。 在这里，它设置了1em的基本值，并使每列从该基本值起最多增加3增量。 此外，它通过$golden将选择比例锁定为黄金比例。

我从来没有感觉到需要调整这些设置，但是您可能会出于好奇而感到需要。 您可以从图书馆随附的十七种比例比例中进行选择，或者当然可以自行设置。

SCSS

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$major-sixth:      1.667;
$minor-seventh:    1.778;
$major-seventh:    1.875;
$octave:           2;
$major-tenth:      2.5;
$major-eleventh:   2.667;
$major-twelfth:    3;
$double-octave:    4;

注意：请确保首先导入波旁威士忌，因为变量是在此处定义的，而不是在Neat中定义的。 同样，如果您决定要通过模块化刻度的其他变量来更改列的宽度，则也不要忘记在gutter更改此单位（在下一节有关gutter ）。

让我们比较默认的12列网格的不同模块化比例尺。 并非所有这些选项都会导致明智的选择，但是请看一看，看看是否有什么吸引您的东西：

萨斯：

$column: modular-scale(3, 1em, $golden)
$gutter: modular-scale(1, 1em, $golden)

萨斯：

$column: modular-scale(3, 1em, $minor-second)
$gutter: modular-scale(1, 1em, $minor-second)

萨斯：

$column: modular-scale(3, 1em, $major-second)
$gutter: modular-scale(1, 1em, $major-second)

萨斯：

$column: modular-scale(3, 1em, $minor-third)
$gutter: modular-scale(1, 1em, $minor-third)

萨斯：

$column: modular-scale(3, 1em, $major-third)
$gutter: modular-scale(1, 1em, $major-third)

对于想要继续前进的人们来说，使用默认的黄金分割率是绝对可靠的选择。

有关比例和比例的更多信息，请查看如何建立模块化印刷比例 。

排水沟

这与column几乎相同，只是它设置网格中单个装订线的相对宽度（每列之间的间隔）。 要创建一个连贯的网格系统，将黄金分割率烘焙到各个方面，默认情况下， gutter还使用$golden来计算gutter 。

SCSS：

$gutter: modular-scale(1, 1em, $golden) !default;

让我为您想象一下； 所有tomato色的东西都是水槽：

注意：如果您决定要通过模块化刻度的其他变量来更改装订线的宽度，则不要忘记为列也更改此单位。

萨斯：

$column: modular-scale(3, 1em, $octave)
$gutter: modular-scale(1, 1em, $octave)

最大宽度

此变量使您可以更改outer-container mixin使用的外部容器的大小。 默认情况下，它被设置为1088 ，其计算为像素em开箱。

这是默认的最大宽度1088px：

现在，将其更改为400px。

萨斯：

$max-width: em(400)

这个变量无疑是很方便的，因为关于应该跨度的网页的“标准”正在Swift变化，而960px天已经过去了。 通过访问此变量，您可以在一个中心位置确定内容可以跨越的空间。

默认功能

如果您通读了先前的教程，您可能会记得，对于媒体查询，我真的很喜欢使用Neat的media mixin，并结合使用new-breakpoint函数的其他便捷用法。 我还提到，如果您不为断点像素值提供任何媒体功能 ，它将默认为min-width 。 让我刷新您的记忆：

萨斯：

$tablet: new-breakpoint(800px 6)

.some-responsive-element
  +media(tablet)
    +span-columns(6)

结果CSS：

@media screen and (min-width: 800px) {
  .some-responsive-element {
    ...
    ...
   }

如您所见，如果您希望使用min-width设置断点，则不提供媒体功能将使事情变得非常简单。 如果在处理媒体查询时默认值使Zen混乱，您也可以更改该默认值。

萨斯：

$default-feature: max-width

边框框大小

默认情况下，它设置为true 。 如果您需要快速了解它的功能，请查看我们的免费课程“ 了解CSS Box模型” 。

默认布局方向

通过此变量，布局使用LTR的默认方向（从左到右）。 这只能采用两个选项之一，第二个是RTL 。 如果您为从相反方向吸收内容的文化而设计，那么这将使您更加喜欢Neat。

禁用警告

如果“过分弃用”警告使您想拥抱他们的作者，那么可以通过将disable-warnings变量设置为true来disable-warnings这些消息静音。

萨斯：

$disable-warnings: true

最后的想法

我认为，这些天，Neat很难被击败。 而且我刚刚得知，新的美国Web设计标准中使用了Bourbon和Neat。 真是太酷了！

但是，如果您仍然不喜欢在您的项目中使用此框架的想法，那么如果您愿意分享自己的理由，甚至可能写这篇文章，我也会很希望。 我很想听听合理的反对意见，或者了解使用Sass构建轻量级语义网格的更好选择。

感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/articles/a-rundown-of-bourbon-neat-variables--cms-24964