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; } } }
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 !
Catégorie
Tags
- Androïd
- Apache
- Ardour
- Atom
- bash
- BEM
- Bootstrap
- calDAV
- carDAV
- Casque
- Cheat sheet
- CKEditor
- Commerce
- Compass
- Composer
- CSS
- Docker
- docker4drupal
- Drupal
- Drupal 7
- Drupal 8
- DrupalVM
- Drush
- faderport
- Fancy
- Features
- Font-awesome
- Git
- Github
- GitLab
- GNU
- grid
- Hacking
- htaccess
- html5
- Imce
- Jack
- Javascript
- jplayer
- jQuery
- Lavalamp
- Less
- Lightning
- Linux
- locahost
- memtest usb .img .iso
- Music
- Mysql
- Omega
- owncloud
- Pageant
- Parallax
- php
- phpMyAdmin
- Portainer
- Puphpet
- Putty
- Regex
- Responsive
- Samba
- Sass
- Sécurité
- SEO
- Solcalendar
- Solr
- ssh
- suggestions
- Taxonomy display
- TouchDaw
- Traefik
- Utilitaire
- Vagrant
- vidéo
- VirtualBox
- vlc
- Wamp
- Webform