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

Question

我是CSS和前端样式的新手，我选择了SASS和SUSY2作为我想解决的两个框架。

我的susy config看起来像这样：

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

因此，这给了我16个流体柱可以使用。我了解这种方式的断点和转移内容，但是有一种方法可以定义具有静态宽度的元素吗？

不是最好的做法吗？

例如，我的顶级磁带上有我的菜单按钮和其他元素，我想避免使用页面缩小和扩展。

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

Answer 1

很难在这里对细节发表评论，因此我会尝试回答更一般的最佳实践问题：

• 可能很难在流体布局中包含静态元素。有或没有Susy，都是如此。它有多么困难取决于您想要的特定布局/响应能力 - 但是Susy没有一种或另一种方式。
• 如果元素不缩小/扩展，您只需要决定在太多时会发生什么，以及元素不再适合时会发生什么。
• Susy对静态与流体与混合没有真正的看法 - 但是Susy无法计算混合网格，并且仍然将其理解为单个网格。根据定义，混合静态和流体是打破网格。您可以做到这一点，Susy不会知道区别，但是您已经走下了障碍。
• SUSY主要是一个布局计算器，有一些用于建立CSS布局的额外快捷方式。span没有什么魔术或需要的，因此您可以在任何地方使用它，并且在它进入时不会使用它。

基本上，Susy建造的是您想要的灵活性。每个Susy Mixin都为某些与布局相关的CSS提供了一个快捷方式，您可以根据需要使用。SUSY函数还可以直接访问数学，您可以在合适的情况下使用它。