Cette semaine je lisais Sass pour les Web designers, de Dan Cederholm et j’ai découvert une petite astuce que je ne connaissait pas : l’imbrication de propriétés composites.

Qu’est-ce que l’imbrication de propriétés composites ?

On sait déjà que les pré-processeurs comme Sass permettent d’écrire des règles CSS imbriquées, ce qui permet d’éviter les répétitions mais aussi de coller à la structure du code HTML.

L’imbrication des propriétés composites permet de faire la même chose avec certaines propriétés CSS composées d’un prefixe, comme par exemple toutes les règles d’arrière-plan (background-color, background-image, etc) ou de polices d’écriture (font-size, font-style, etc.). Voilà à quoi ça ressemble en pratique :

See the Pen Imbrications de propriétés by Ange Chierchia (@nighcrawl) on CodePen.

Cette astuce fonctionnera avec toutes les propriétés composées d’un prefixe (margin, padding, border, background, font, etc.).

Bonne journée !