如何在 Susy2 的流体网格系统中制作静态元素宽度

Question

我是 CSS 和前端样式的新手，我选择了 Sass 和 Susy2 作为我想使用的两个框架。

我的 susy 配置如下所示：

$susy: (
        columns: 16,
        gutters: 1/4,
        column-width: 2rem,
        output: isolate
);

所以这给了我 16 个流体柱可供使用。我理解以这种方式设置断点和移动内容，但有没有办法定义具有静态宽度的元素，或者这不是最佳做法？

例如，我的顶部导航栏上有我的菜单按钮和其他元素，我希望它们不会随页面收缩和扩展。

我对流体设计很陌生，所以我不确定是否应该制作使用 @span 的容器，然后在其中制作静态宽度元素？似乎这在我的 html 中添加了一个额外的层，我只想在元素本身上有一个 @span。

Answer 1

这里很难评论具体细节，所以我将尝试回答更一般的最佳实践问题：

• 在流​​动布局中包含静态元素是可能的，但可能很困难。不管有没有苏西，这都是真的。它的难度取决于您想要的特定布局/响应能力 - 但 Susy 并没有真正的意见。
• 如果元素不收缩/扩展，您只需决定当空间过多时多余的空间会发生什么，以及元素不再适合时会发生什么。
• Susy 对静态、流体和混合没有真正的看法 - 但 Susy 无法计算混合网格，并且仍然将其理解为单个网格。 根据定义，混合静态和流体会打破网格。你可以做到，Susy 不会知道其中的区别，但你已经走出了人迹罕至的道路。
• Susy 主要是一个布局数学计算器，带有一些用于建立 CSS 布局的额外快捷方式。 span 没有什么神奇之处，也没有什么要求，所以你可以在任何有用的地方使用它，而不是在它碍事时使用它。

基本上，Susy 被构建成您希望的那样灵活。每个 Susy mixin 都为某些与布局相关的 CSS 提供了一个快捷方式，您可以随意使用它。 Susy 函数还使您可以直接访问数学，您可以根据需要使用它。