Mixin sass pour des margins et des paddings responsives

Je propose aujourd’hui une mixin que j’utilise sur quasiment tous les projets sur lesquels je suis amené à faire de l’intégration. Cette mixin sass permet de générer des classes responsives “à la Boostrap” pour les margins et les paddings.

Elles s’utilisent de la façon suivante :
<div class="p-xs-5 m-sm-15 mh-md-30"></div> qui veut dire :

• Utilise des paddings de 5px tout le temps
• Utilise des marges 15px à partir des écrans “smalls”
• Utilise des marges horizontales de 30px à partir des écrans “mediums”

Toutes les combinaisons sont possibles.

Les variables $screen-sm-min, $screen-md-min et $screen-lg-min sont issues du Bootstrap.
Il est possible de changer les tailles de marge pour les adapter à son projet.