0

estou trabalhando pela primeira vez em um projeto com SASS, COMPASS e SUSY.

Gostaria de saber se tem alguma forma de gerar as colunas do suzy de forma automática.

1 Resposta 1

1

Sim, o Suzy tem como criar Grids de forma automática. Ele foi feito para isso. Pode levar alguns dias para aprender a isso, mas ele funciona bem. Algo que desde já você deve estar preparado é que o Suzy vai ser mais fácil entender se você souber um pouco mais sobre como CSS pode ficar responsivo. Boa parte da dificuldade de fazer algo mais avançado nele se deve ao desenvolvedor precisar entender melhor como é que isso funciona sem ele.

Desde já, Suzy é excelente para profissionais que querem um código CSS limpo mínimo. Leve isso em conta.

Como aprender os passos básicos com o Suzy

Veja o tutorial em http://susy.oddbird.net/guides/getting-started/#start-manual. Colo aqui as partes importantes

Será necessário definir algumas propriedades básicas antes de iniciar

$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

Feito isso, é ler a referência e sair usando. Um exemplo

.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); }
  }
}

Referência

Assim que sair do tutorial básico, você irá ver com frequência a referência oficial do Suzy em O site que explica como fazer isso é a referência oficial dele em http://susy.oddbird.net/guides/reference/

1
  • obrigado pela explicação. Algo que estou tendo dificuldade é que quando defino que a largura vai ser total 12 de 12 colunas, ele fica maior do que deveria ser. Será que tem algo errado? Commented 14/02/2014 às 11:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .