本教程旨在使您入门。 为Sass和Bourbon构建的语义网格框架。
Bourbon Neat可使您的标记保持整洁,从而防止您使用网格,列和行类将其弄混。 相反,它利用了混合功能,并且通过将其各种混合功能应用于现有的标记,您可以创建灵活的响应式布局。 让我们探索最基本的mixin:
- 上下文转移
- 外容器
- 跨栏
- 欧米茄
- 转移
- 垫
注意:为了安装Bourbon Neat并开始使用Bourbon Neat,请看一下以前的教程Bourbon Neat:语义,非调理,响应式网格 。
外容器
此混合用于确定布局的容器或包装。 将其应用到元素,Neat将自动在视口中居中(通过添加margin-left: auto
/ margin-right: auto
),清除浮点并应用指定的$max-width
。 它是一个可选的mixin(尽管推荐),并且您可以在单个页面上包含多个外部容器元素。 您无法做的一件事就是将它们嵌套。
外部容器容纳您的网格。 在其中,网格可以通过$grid-columns
变量(默认为12列)跨grid-settings
文件中指定$grid-columns
数。 行中的所有元素必须加起来等于此变量中指定的总列数。
在下面的虚拟示例中,您将看到container
元素包装了一些aside
和article
标签。 它们分别跨越3列和9列,并且最多增加12列,如我的设置所指定。 如果我要超过该列数,则布局肯定会中断。 将outer-container
混合视为在容器元素内添加一致的网格布局的最可能的前提。
哈姆:
.container
%aside Aside: 3 columns
%article Article: 9 columns
%aside Aside: 3 columns
%article Article: 9 columns
%aside Aside: 3 columns
%article Article: 9 columns
萨斯:
body
background-color: white
.container
+outer-container
background-color: #f5f5f5
aside, article
padding: 10px
margin-bottom: 20px
height: 100px
aside
+span-columns(3)
background-color: #81d4fa
article
+span-columns(9)
+omega
background-color: #e64a19
在此示例中,背景色使查看部件之间的装配更加容易。 而且,此时您不必担心omega
mixin; 所有这些都将在适当时候披露。
在_grid-settings Sass部分中,您还可以指定$max-width
Sass变量,该变量定义页面内容应跨越的最大宽度。 例如,Neat开箱即用,可轻松更改的$max-width
设置为1088px(转换为em)。
如果您希望某个容器元素的max-width
与grid-settings
全局grid-settings
max-width
不同,则还可以为该mixin提供$local-max-width
的参数。 在这里,您可以提供pixel , em或percent参数。 该容器内的网格的列会自动调整其宽度,但列数保持不变。
萨斯:
.container
+outer-container(800px)
background-color: #f5f5f5
要么
.container
+outer-container(80%)
background-color: #f5f5f5
跨栏
如果您不熟悉网格设计,则应该研究Khoi Vinh撰写的出色的Ordering Disorder:Web设计的网格原理 。 我强烈推荐它。 您需要立即理解的一个概念是,通过跨页面的一系列列来构建网格设计。
Neat的基本用法非常简单。 您选择一个元素,并告诉它在$grid-columns
总数中应该跨越多少$grid-columns
。 让我演示一下基础知识。
哈姆:
.container
%aside.first First: 2 columns
%article.second Second: 10 columns
%aside.third Third: 4 columns
%article.fourth Fourth: 8 columns
%aside.fifth Fifth: 6 columns
%article.sixth Sixth: 6 columns
%aside.seventh Seventh: 8 columns
%article.eighth Eighth: 4 columns
%aside.ninth Ninth: 10 columns
%article.tenth Tenth: 2 columns
萨斯:
body
color: white
background-color: white
.container
+outer-container
background-color: #f5f5f5
aside, article
padding: 10px
margin-bottom: 20px
height: 100px
article
background-color: #e64a19
aside
background-color: #81d4fa
.first
+span-columns(2)
.third
+span-columns(4)
.fifth
+span-columns(6)
.seventh
+span-columns(8)
.ninth
+span-columns(10)
.second
+span-columns(10)
.fourth
+span-columns(8)
.sixth
+span-columns(6)
.eighth
+span-columns(4)
.tenth
+span-columns(2)
.second, .fourth, .sixth, .eighth
+omega
正如你所看到的,每行由一个蓝色的aside
左边,一个红色article
右边的元素。 布局不会中断,因为在外部容器元素中,它们的总列数和宽度之和等于12(按$grid-columns
定义)。
最酷的部分是,无需在标记中添加任何样式信息,因为这与您的表示层有关,因此您只需定义Sass文件中网格的构成方式即可。 完全分开的关注点。 在您爱上您之后,每一个精打细算的设计师都会爱您,因为他们不会用样式信息污染内容。
另外一个好处是,您可以随时随地在标记中命名类。 没有人为您做出这些决定,这是没有任何掩饰的祝福。
嵌套列
有时不时需要将网格元素快速嵌套在另一个元素中。
萨斯:
.some-parent-element
+span-columns(10)
.some-nested-element
+span-columns(5 of 10)
假设您有一个跨10列的宽元素,并且应该合并两个跨5列的较小元素。 在这种情况下,请为嵌套元素提供父列的大小,作为span-columns
mixin的参数。 让我们看一个更具体的例子。
哈姆:
.container
%aside.first First: 2 columns
%article.second
%article.third Third: 5 nested columns
%article.fourth Fourth: 5 nested columns
萨斯:
body
color: white
background-color: white
.container
+outer-container
background-color: #f5f5f5
padding:
top: 15px
bottom: 15px
aside, article
padding: 10px
margin-bottom: 20px
height: 100px
article
background-color: #e64a19
aside
background-color: #81d4fa
.first, .second
height: 250px
.second
+span-columns(10)
.third, .fourth
+span-columns(5 of 10)
background-color: darken(#e64a19, 6)
margin-top: 25px
.first
+span-columns(2)
padding-top: 25px
欧米茄
对于新手来说,使用网格的另一个重要概念是装订线。 这是网格元素之间右侧的边距,并且会自动为容器中的每个网格元素(最后一个除外)创建一个边距! 如果您调整浏览器窗口的大小,则装订线也会相应地缩放。 下面的示例演示了网格元素之间的空间。 装订线由外部容器发出的灰色背景表示。
哈姆:
.container
.first 1 col
.second 2 col
.third 3 col
.fourth 3 col
.fifth 2 col
.sixth 1 col
萨斯:
body
color: white
background-color: white
.container
+outer-container
background-color: #f5f5f5
.first, .second, .third, .fourth, .fifth, .sixth
background-color: #81d4fa
padding: 10px
height: 200px
.first
+span-columns(1)
.second
+span-columns(2)
.third
+span-columns(3)
.fourth
+span-columns(3)
.fifth
+span-columns(2)
.sixth
+span-columns(1)
随便吧? 但是,猜想如果我们通过复制其正下方的行来加倍列会发生什么呢?
噢亲爱的。 那么这里发生了什么? 由于第一行中的第六个元素不再是最后一个元素 ,因此默认情况下它还会获得一个右装订线(边距)。 让我对此非常清楚:为了获得清晰对齐的布局,默认情况下,容器中的最后一个元素的装订线已删除。 由于在第六个元素上增加了装订线,因此第一行中所有元素的宽度现在超过了每行可以跨越的total-columns
数的total-columns
total-width
,并且网格中断。
没什么可悲的,而且修复很容易。 只需找到需要将右侧装订线移除的元素,然后在其中应用omega
mixin。 做完了!
哈姆:
.container
.first 1 col
.second 2 col
.third 3 col
.fourth 3 col
.fifth 2 col
.sixth 1 col
.first 1 col
.second 2 col
.third 3 col
.fourth 3 col
.fifth 2 col
.sixth 1 col
萨斯:
body
color: white
background-color: white
.container
+outer-container
background-color: #f5f5f5
.first, .second, .third, .fourth, .fifth, .sixth
background-color: #81d4fa
padding: 10px
height: 200px
.first
+span-columns(1)
.second
+span-columns(2)
.third
+span-columns(3)
.fourth
+span-columns(3)
.fifth
+span-columns(2)
.sixth
+span-columns(1)
+omega
现在,每个元素都很好地放置到位,所有行都没有超出它们的total-width
。
让我们更进一步。 假设您有几行应均匀显示相同大小的图像而不会破坏网格。 我们需要的是几个具有相同宽度的元素,这里是span-columns(2)
,并将它们放置在几行中。 神奇之处在于您为omega
提供了以下论据:
img
+omega(6n)
在这里,每个第六个img
元素都将删除其右装订线,因此将六个2-column
元素均匀地装入外部容器的12列中。 整齐!
哈姆:
.container
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
%img
萨斯:
body
color: white
background-color: white
.container
+outer-container
background-color: #f5f5f5
img
+span-columns(2)
+omega(6n)
height: 200px
margin-bottom: 5px
background-color: #81d4fa
每行只需要四个元素? 没问题! 将omega
的论点减少到4n
。 在下一个教程中,当我们进入响应式网格以及如何通过媒体查询更改布局时,此技术将派上用场。
萨斯:
img
+omega(4n)
我鼓励您通过提供的笔来玩这个例子,并对此有所了解。 这里没有魔术,但是如果您需要更多的时间来围绕细节,请不要感到惊讶。 欧米茄的观点有些混乱,我毫不怀疑它将很快就变得清晰起来。
注意!
智慧的最后一句话:在某些情况下,向元素提供span-columns
和omega
mixins似乎很重要。 我的建议是始终先应用span-columns
,以免发生意外行为。
转移
这个混入应该很快。 如果要通过向左或向右水平移动元素来调整元素,则可以应用shift
mixin,并为其提供应移动的列数。 您可以使用整数或浮点数。
萨斯:
.some-element-that-needs-adjusting
+shift(n)
提供正数(无单位)的列以将元素向右移动,反之亦然。 在幕后,Neat增大或减小元素上的margin-left
的百分比值。
注意:如果使用shift
不带参数,它将默认为shift(1)
。
上下文转移
这种混合与shift
具有相同的思想(它shift-in-context
后台使用shift-in-context
),但是是为嵌套的网格元素制作的。 我在一个带有嵌套网格的虚拟示例中进行了一些处理,但老实说,我使用shift
获得了相同的结果。
垫
我认为我不需要详细介绍其工作原理。 如果您提供带有default
的mixin作为参数,它可以清理样式表并为您提供默认的装订线宽度。 没什么花哨的,但我想我会提到它来完成您调整网格间距的选择。
萨斯:
.some-element-that-needs-padding
+pad(10px 20px 30px default)
结论
这就是您开始使用Neat网格所需要知道的一切。 这些示例应该为您提供了坚实的基础,使您能够构建所需的任何网格-无论您喜欢多复杂。
下一个教程将涵盖另一轮的Neat mixins,还说明了如何使用媒体查询和断点来调整网格以更改视口大小。 到时候那里见!
翻译自: https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins--cms-24894