How to generate columns with SUSY?

Question

I am working for the first time on a project with SASS, COMPASS and SUSY.

I wonder if you have any way to generate Suzy columns automatically.

Answer 1

Yes, Suzy can automatically create Grids. He was made for it. It may take a few days to learn this, but it works well. One thing you should be prepared on is that Suzy will be easier to understand if you know a little more about how CSS can be responsive. Much of the difficulty of doing something more advanced in it is that the developer needs to understand better how it works without it.

Already, Suzy is excellent for professionals who want a minimum clean CSS code. Take that into account.

How to learn the basic steps with Suzy

See the tutorial on http://susy.oddbird.net/guides/getting-started/#start-manual. I place here the important parts

You will need to define some basic properties before starting

$total-columns  : 12;             // Grid com 12 colunas
$column-width   : 4em;            // Cada coluna ocupa 4em
$gutter-width   : 1em;            // 1em de vão entre as colunas
$grid-padding   : $gutter-width;  // grid-padding é igual aos vãos

Once this is done, read the reference and exit using. An example

.page {
  // .page atuará como um contener
  @include container;

  // header e footer serão largura completa por padrão.
  header, footer { clear: both; }

  // nav será largura de 3 colunas de um total de 12.
  nav { @include span-columns(3,12); }

  .content {
    // .content irá do final da coluna 9 (omega) de 12.
    @include span-columns(9 omega,12);

    // .main terá largura de 6 de 12 colunas
    .main { @include span-columns(6,9); }

    // .secondary ocupará as 3 ultimas colunas (omega) das 9 disponiveis.
    .secondary { @include span-columns(3 omega,9); }
  }
}

Reference

Once you leave the basic tutorial, you will often see Suzy’s official reference in The website that explains how to do this is his official reference in http://susy.oddbird.net/guides/reference/