🥇 Layouts DRY com Sass

Tenho certeza de que todos nós já experimentamos isso. Temos um layout de 2 ou 3 colunas que depois de algum tempo é cortado junto com matemática “complicada” e margens estranhas. Vamos consertar isso rapidamente com Sass!

/*  _layout.scss  */
$wrapperWidth: 980px;
$defaultPadding: 20px;
$columnSpacing: 20px;
$column1Width: 720px - ($defaultPadding * 2);
$column2Width: $wrapperWidth - ($column1Width + ($defaultPadding * 2)) - ($defaultPadding * 2) - $columnSpacing;

/*
 * anyfile.scss
 *
 */
@import 'layout'

.wrapper {
  width: $wrapperWidth;

  .col1 {
    float:left;
    padding:$defaultPadding;
    width:$column1Width;
  }

  .col2 {
    float:left;
    margin-left:$columnSpacing;
    padding:$defaultPadding;
    width:$column2Width;
  }
}

Agora você pode tornar seu layout maior ou menor (ou renderizar facilmente para dispositivos móveis) sem muitos problemas!

Related Posts