Mise en page et préprocesseurs

Mise en page

Bien que la mise en page puisse paraître être un des enjeux centraux du CSS, il n’a pas toujours été simple, et il n’est pas toujours simple de faire de la mise en page aujourd’hui.

Flexbox est aujourd’hui un outil fort pratique, et fort bien supporté par les navigateurs pour se simplifier le travail de mise en page. Celui-ci devrait être complété dans les prochaines années par CSS grid.

Il est donc recommandé à ceux qui voudraient apprendre à utiliser CSS pour créer des sites web ou applications, de se pencher assez rapidement sur flexbox, et à jeter un oeil de temps à autre aux avancées de CSS grid.

Préprocesseurs

Les préprocesseurs sont des langages qui ajoutent au CSS des fonctionnalités des langages de programmation, comme les variables, fonctions, test et boucles.

Ces langages n’étant pas compatibles avec les navigateurs, il est nécéssaire de les faire traiter par un processeur lequel les transforme en CSS. D’où le nom de ces langages, les préprocesseurs.

Il existe de nombreux langages de préprocesseurs, comme SCSS/SASS, LESS ou stylus.

exemple : SCSS

// on défini la variable $couleur
// et on lui assigne la valeur
// rouge : 255
// vert : 0
// bleu : 0
// opacité : 1
$couleur: rgba(255, 0, 0, 1);

.exemple {
  // couleur du texte
  color: $couleur;

  // couleur de fond : 40% plus lumineux
  background-color: lighten( $couleur, 40% );

  // liseré inférieur : 40% plus sombre
  border-bottom: 2px solid darken( $couleur, 40% );
}

Donnera en CSS :

.exemple {
  color: red;
  background-color: #ffcccc;
  border-bottom: 2px solid #330000;
}