如何在Susy2

时间:2016-06-24 13:16:35

标签: css css3 sass grid susy

我是CSS和前端造型的新手,我选择了Sass和Susy2作为我想要解决的2个框架。

我的susy配置看起来像这样:

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

所以这给了我16个流体柱。我理解这种方式的断点和移动内容,但有没有办法定义一个静态宽度的元素,或者这不是最佳实践?

例如,我的顶部导航栏上有我的菜单按钮和其他元素,我希望不要缩小和扩展页面。

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

1 个答案:

答案 0 :(得分:0)

这里很难评论细节,所以我会尝试回答更一般的最佳实践问题:

  • 在流体布局中包含静态元素是可能的,但可能很困难。无论是否有Susy都是如此。这有多难取决于你想要的具体布局/响应能力 - 但Susy没有这种或那种真正的意见。
  • 如果元素没有缩小/扩展,你只需要决定当有太多时候额外空间会发生什么,以及元素不再适合时会发生什么。
  • Susy对Static vs fluid vs mixed没有真正的意见 - 但是Susy没有办法计算混合网格,并且仍然将其理解为单个网格。混合静态和流体按照定义打破网格。你可以做到这一点,而苏西也不会知道其中的差别,但你已经走开了。
  • Susy主要是一个布局数学计算器,还有一些用于建立CSS布局的额外快捷方式。 span没有任何魔力或要求,因此您可以在任何有用的地方使用它,而不是在它妨碍时使用它。

基本上,Susy的设计与您希望的一样灵活。每个Susy mixin都为某些与布局相关的CSS提供了一个快捷方式,您可以根据需要使用它。 Susy函数还允许您直接访问数学,您可以根据需要使用它。