How to propery define nested elements?

Question

Given I have the following markup:

<body>
  <article>
    <div class="foo">Foo</div>
    <div class="bar">Bar</div>
  </article>
</body>

The body has a fixed width of 910px:

body { @include container(910px); }

The body has an article element, which consists of 2 nested divs (.foo and .bar).

At this point, if I wanted .foo and .bar take up 6 columns each. This is easy enough by doing:

article {
  @include container

  .foo { @include span(6 of 12) }
  .bar { @include span(6 of 12) }
}

Is it fine for the body to @include container and the succeeding element (article) to contain another @include container directly?

In Twitter Bootstrap, a col should always follow after a row. But this isn't Bootstrap. It's Susy.

In Susy, what is the same concept of a row and a col? Or does @include span basically do both?

score 0 · Accepted Answer · answered May 19 '15 at 16:36

Bootstrap uses rows to remove the edge gutters. Susy doesn't use or require rows, so span() is all you need. There is also no need for the repeated container() mixin. If you want the article to clear floats, you can use a clearfix instead (ours is called susy-clearfix()).

How to propery define nested elements?

1 Answers1