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!