Définir une grille de mise en page avec Sass

Ma grille de mise en page consistait en six colonnes et des gouttières de 20 pixels entre chaque et un conteneur de 1000 pixels de large. Afin de toujours me laisser le choix de partir sur un nombre de colonne différent, la largeur de colonne est calculée en fonction des autres variables. Voici ce que ça donne :

$columns: 6;
$gutter-width: 20px;
$container-width: 1000px;
$column-width: ($container-width - (($columns - 1) * $gutter-width))/$columns;

Mon interface devant être adaptée pour ordinateurs et tablettes, j’ai préféré utiliser les pourcentages plutôt que les pixels pour définir la taille de mon conteneur et de mes gouttières. Pour ce faire, je n’ai pas eu besoin de toucher à ma grille (que l’on verra plus tard), seulement à mes variables $gutter-width et $container-width que j’ai passé à 2% et 100%, respectivement.

Une fois mes différentes variable instanciées, j’ai pu créer les différentes colonnes de ma grille de mise en page avec une boucle @for comme celle-ci :

@for $i from 1 through $columns {
  .col-#{$i}-of-#{$columns} {
    width: ($i * $column-width) + (($i - 1) * $gutter-width);
  }
}

Une fois compilé, j’obtiens les règles CSS suivantes qui définissent la taille pour chaque colonne de la grille :

.col-1-of-6 {
  width: 15%;
}

.col-2-of-6 {
  width: 32%;
}

.col-3-of-6 {
  width: 49%;
}

.col-4-of-6 {
  width: 66%;
}

.col-5-of-6 {
  width: 83%;
}

.col-6-of-6 {
  width: 100%;
}

Pour que toutes les colonnes de ma grille de mise en page partagent les mêmes styles, je défini une classe .column que j’ajouterai à chaque bloc ayant une classe .col-X-of-6 :

.column {
  box-sizing: border-box;
  display: block;
  float: left;
  margin-right: $gutter-width;
  position: relative;
}

Une fois mes classes prévue pour les colonnes de ma grille terminées, il me reste à définir une classe .row qui contiendra au maximum six blocs .column.col-X-of-6, ainsi que ma classe .wrapper qui englobera le tout. voilà ce que ça donne :

.wrapper {
  width: $container-width;
}

.row {
  margin: 0 0 $gutter-width;

  &:before,
  &:after {
    clear: both;
    content: "";
    display: table;
  }
}

Afin que mes blocs .column restent bien dans leur « ligne » ( classe .row), il faut réinitialiser le flux avec les pseudo-classe :before et :after afin de garantir qu’aucun bloc .column ne sorte de son bloc .row parent.

Tout est presque bon maintenant. Nos colonnes ayant toutes une marge de droite défini, la dernière colonne de chaque ligne ne sera pas bien alignée avec ses soeurs. Pour remédier à ce problème, il suffit de passer la valeur de margin-right à «  pour le dernier bloc .column contenu dans un bloc .row. Vous me suivez ?

.column {
  /* nos règles précédentes */

  .row &:last-of-type {
    margin-right: 0;
  }
}

Le tour est joué, on a construit notre propre grille de mise en page CSS en toute simplicité avec Sass. Voilà le résultat !

See the Pen OyBPEm by Ange Chierchia (@nighcrawl) on CodePen.

J’espère que cet article assez basique sur la création d’une grille de mise en page avec Sass vous aura plu. À bientôt !