使用PostCSS-Flexbox构建复杂的布局

null

Flexbox是一个减少CSS膨胀的好工具,并且内置了一些糖来处理源顺序和对齐等事情。但它没有为创建列和装订线尺寸的数学提供任何帮助。许多专家反复声明:Flexbox很不错,但它不是网格系统。

我们应该使用Flexbox,但我们不应该抛弃网格系统背后的基本概念,这些概念将我们拉出设计的“GeoCities时代”:

  • 使列与某些事物成比例
  • 在整个设计中使用一致的排水沟

我们可以使用众多Flexbox网格系统中的一个,但实际上,这些系统背后的样式与基于浮动的网格大致相同。作者只需向容器添加display:flex,以及一些混淆Flexbox属性的辅助类(例如,类.grid垂直对齐 - 中是一种混淆Align-items:center)。

唯一的区别是,现在列是'弯曲的',这意味着我们得到了我之前提到的糖。但这仍然无法解决网格今天面临的主要问题:网格系统仍然输出大量的CSS膨胀,网格仍然很无聊。

网格的问题

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use

系统膨胀:Bootstrap为网格生成的CSS只有16,435个字符 - 其中大部分都是你永远不会使用的

网格作者通常会分发大量的CSS,这些CSS可以根据某些任意设备大小进行偏移,源顺序,对齐和调整大小。他们依靠gzip来减轻一些伤害,但这并不能解决所有问题。如果您不需要这些额外功能怎么办?

假设您当前使用的框架提供了网格混合,最好的解决方案可能是学习这些并构建自己的列。这会产生很小的膨胀,但会将您的网格限制为分数,并且不会在不同框架之间为您提供大量移动性。

关于第二个问题。设计师已经精神上被锁定在基于同等大小的列的特定组合做出所有决定。结果,整个互联网开始模糊成一个“移动堆栈;任何其他'反乌托邦的1/12列组合。

Flexbox推出FLEX-增长,这让我们有点自负。现在我们可以设置看起来很好的尺寸并使用拉伸元素填充剩余空间,但是整个页面中的排水沟是否一致?内容区域是否以任何比例构成,或者我们是否回到了它的位置?

进入龙

这两个问题的解决方案都包含在一个名为postcss-ant的函数中。 PostCSS插件可以与webpack,gulp或简单的命令行等一系列构建工具一起使用。 ant使用一个看似简单的API无缝地混合到纯CSS(或任何预处理器)中,掩盖了数十种令人难以置信的内容计算公式。它需要两个类似mixin的参数来获取过多的网格友好尺寸。

一个例子可能会使这更清楚:宽度:尺寸(1/2)得到(1)回报计算(99.99%* 1/2 - (30px - 30px * 1/2))。让我们打破这个:

  • 大小()是一个以空格分隔的大小列表。这些可以是各种大小的任意组合:有效CSS长度形式的固定数字(PXEM);分数或浮点数(返回任何剩余的,没有固定数字);和汽车关键字(返回剩下的任何大小,没有分数和固定数字)
  • 采摘()是一个基于1的索引,从列表中获取网格友好的大小。所以尺寸(1px 2px 3px)得到(2)会回来的2px的
  • 计算公式是网格友好的大小

我们得到两列网格中每列的宽度,它们之间有一个30px的沟槽:

.grid {display:flex; flex-wrap:wrap; } .half {width:sizes(1/2)get(1); / *返回calc(99.99%* 1/2  - (30px  -  30px * 1/2))* / margin-right:30px; / *在每一列的右侧放置一个排水沟* /}。半:nth-child(2n + 2){/ *从第二个元素开始,开始计数2s * / margin-right:0; / *删除每行的最后一个装订线* /}

这已经让设计师有能力在他们认为合适的地方使用这些尺寸,但让我们深入了解。

尺寸(100px 1/2)得到(1)回报100px的。很简单,但为什么我们需要使用ant来返回100px的?我们将在一秒钟内完成。

 尺寸(100px 1/2)得到(2)回报calc((99.99% - (100px +(30px * 1)))* 1/2 - (30px - 30px * 1/2))。哇靠。蚂蚁正在找出固定数字的总大小,然后返回1/2剩余的东西 - 以第n个网格友好的方式。

我们可以使用这些计算使用a创建网格的公式100px的专栏和两个1/2像这样的列(我将省略.grid保存树的样式,但一定要在代码中包含它们:

.fixed-size {width:sizes(100px 1/2)get(1); / *返回100px(我知道这看起来很傻但是跟我一起走了一段时间)* / margin-right:30px; } .half {width:sizes(100px 1/2)get(2); / *返回calc((99.99% - (100px +(30px * 1)))* 1/2  - (30px  -  30px * 1/2))* / margin-right:30px; } .half:nth-child(3n + 3){margin-right:0; }

现在我们可以获得一些以前无法实现的尺寸,但它还不是超灵活的,并且在处理多种尺寸时可能需要大量的书写。

预处理器循环

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row

最小标记:使用postcss-ant的最小标记,双列,第n个网格。注意行中最后一个元素没有margin-right

预处理器和PostCSS并不总是相处 - 特别是涉及自定义语法时。幸运的是,ant的API是预处理器友好的。我们可以使用像Postcss-scss这样的PostCSS解析器和PreCSS插件,但是这种方法使用了大量未完成/未维护的PostCSS插件,这些插件很难模仿Sass的功能。我发现最好的工作流程是:

  • 使用像node-sass这样的快速预处理器来观看In.scssOut.css
  • 使用PostCSS观看Out.cssFinal.css
  • Final.css在你的标记中

这为您提供了最好的预处理器语法,以及您心中所需的所有PostCSS插件。

现在为酷的东西。预处理器通常有一种方法可以循环指定的次数,同时提供迭代器:

@for $ i从1到3 {content:$ i; //返回内容:1;内容:2;内容:3; }

通过对预处理器的一点了解,您可以以非常有趣的方式开始使用ant ...

$ sizes:100px 1/2 1/2; $ gutter:30px; $ length:length($ sizes); .column {margin-right:$ gutter; @for $ i从1到$ length {&:nth-child(#{$ length} n +#{$ i}){width:sizes($ sizes)get($ i)gutter($ gutter); &nth-child(#{$ length} n +#{$ length}){margin-right:0; }}

现在我们的不规则大小的列包裹到新行而没有额外的标记。继续使用此代码修补。尝试不同的尺寸,排水沟和添加新尺寸(如100px Auto 100px)。

这是一个非常常见的蚂蚁模式,所以我把它包装成一个与vanilla CSS一起使用的属性:

.grid {generate-grid:sizes(100px 1/2 1/2); / *您可以传递其他选项,但不再需要pluck()。 * /}

很多选择

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible

预处理器循环:当我们将它与预处理器循环结合起来创建过去不可能的布局时,ant真的开始显示它的强度

当你知道要传递的元素的大小和数量时,第n个网格很棒,但有时你会想要创建一个容器并在那里转储一些随机大小的元素。在这些情况下,负利润网格是你最好的选择。简单地通过负利润像这样的蚂蚁:

.grid {margin:0 -15px; } .column {width:sizes(1/3)get(1)grid(negative-margin);保证金:0 15px; }

结论

这些例子只是对postcss-ant可以做的所有酷事的一瞥。它有几个可选参数和大量描述性错误处理,但蚂蚁真正的力量就在于你。

简单地返回一些数据的“哑”工具总是最好的工具,因为它们将功能重新放回开发人员的手中。这就是postcss-ant的目的。如果你很感兴趣,请前往corysimmons.github.io/postcss-ant对于一些面子融化的演示和甜蜜的文档。

本文最初发表于net Magazine的第286期,在这里买。

相关文章:



翻译字数超限