Sass snippets

Sass snippets

Mercredi, Août 7, 2019

 

 

 

 

Exemple d'utilisation de map + boucle, interpolation, affectation d'unité :
Ici j'avais besoin de fixer des dimensions en fonction de classe (affectées dynamiquement via un twig de paragraph Drupal)

 //media dimensions map
$widths: (100,80,60,50,20);

@each $dim_perc in $widths {
  //Interpolation des différentes classes
  .gabarit--media-width-#{$dim_perc} {
    //affectation avec ajout de l'unité en pourcentage
    width:$dim_perc * 1%;

    iframe, video {
      // fixed heights for iframe embeded or uploaded video
      $max_width: 1048;
      $dim_pix: $dim_perc * $max_width / 100 ;
      $ratio: 270 / 480;

      height: $ratio * $dim_pix * 1px;

    }
  }
}
Tags: 

Bienvenue sur le blog !

Il s'agissait au départ d'un recueil de notes donc certains billets sont plutôt succincts.
J'espère que vous y trouverez l'info qu'il vous manque dans votre recherche.
Vos commentaires sont les bienvenus.

Bonne lecture !

Mois / Années

Recherche