【问题标题】:Omega needed, if all elements span one column?如果所有元素都跨越一列,需要欧米茄吗?
【发布时间】:2013-01-22 15:38:10
【问题描述】:

如果所有元素恰好跨越一列,Susy可以自动(不指定omega)填充多列布局吗?

想要什么

+---------+---------+
| I       | want    |
+---------+---------+
| two     | columns |
+---------+---------+

得到的(代码如下):

+---------+
| I       |
+---------+
| want    |
+---------+
| two     |
+---------+
| columns |
+---------+

HTML:

<div id="container">
  <div>I</div>
  <div>want</div>
  <div>two</div>
  <div>columns!</div>
</div>

SCSS:

@import 'susy';

$total-columns: 2;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;

#container {
    @include container;
    @include susy-grid-background;

    &>div {
        @include span-columns(1);
        height: 50px;
    }
}

【问题讨论】:

    标签: compass-sass sass susy-compass


    【解决方案1】:

    没有。您需要指定 omega,否则 Susy 将不得不假设太多关于您的标记和期望结果的事情。我们不惜一切代价试图避免这种情况。解决这个问题的最好方法是使用nth-omega() mixin:

    div {
      @include span-columns(1);
      @include nth-omega(even);
    }
    

    它是:nth-child() 选择器的简单扩展,采用相同的关键字、数字或算法。

    【讨论】:

    • 我还尝试了三列:nth-omega('3n') 效果很好!
    • 现在让我们把事情变得更复杂。在another question 我问如果元素有不同的宽度怎么办。
    猜你喜欢
    • 2023-03-26
    • 2014-11-14
    • 1970-01-01
    • 1970-01-01
    • 2017-08-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-31
    相关资源
    最近更新 更多