Le but ici est d’associer à un titre une combinaison de deux icônes issues d’une police d’icônes: une grande et une petite calée en bas à droite de la grande.
HTML:
|
1 2 3 4 5 |
<h2 class="heading-two"> <span class="ea-heading-icon"> <!-- grande icône --><i class="iconfont iconfont-directions-car"></i> <!-- petite icône --><i class="iconfont iconfont-access-time"></i> </span> Vous déposez / venez chercher un passager</h2> |
SASS:
Importer la librairie Sassy Maps de Hugo Giraudel
Nous allons utiliser la fonction map-deep-get de cette librairie dans notre mixin.
|
1 |
@import "../vendor/sassy-maps/sass/sassy-maps/map-get"; |
Créer le mixin SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@mixin heading-icon-combo($breakpoint,$element){ $base-size-value: map-deep-get($header-styles, "#{$breakpoint}", "#{$element}", "font-size"); $big-icon-size-value: $base-size-value + $base-spacing-small/2; $small-icon-size-value: $base-size-value/2; position: relative; display: inline-block; width: $big-icon-size-value + $small-icon-size-value/2.6; height: $big-icon-size-value; text-align: left; .iconfont { font-size: rem-calc($big-icon-size-value); + .iconfont { position: absolute; top: 0; right: 0; font-size: rem-calc($small-icon-size-value); } } } |
Ce mixin SASS récupère dans le tableau de variables ci-dessous la valeur font-size définie pour un élément HTML Hx en fonction d’un breakpoint:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Foundation for Sites Settings // ----------------------------- // // 4. Base Typography // ------------------ $header-styles: ( small: ( 'h1': ('font-size': 24), 'h2': ('font-size': 24), 'h3': ('font-size': 19), 'h4': ('font-size': 18), 'h5': ('font-size': 17), 'h6': ('font-size': 16), ), medium: ( 'h1': ('font-size': 28), 'h2': ('font-size': 28), 'h3': ('font-size': 21), 'h4': ('font-size': 21), 'h5': ('font-size': 20), 'h6': ('font-size': 16), ), ); |
Il calcule ensuite la taille de la grande et de la petite icône.
Utiliser ce mixin SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.ea { // // ea-heading-icon &-heading-icon { vertical-align: top; .heading-two & { @include breakpoint(small only) { @include heading-icon-combo(small,h2); } @include breakpoint(medium) { @include heading-icon-combo(medium,h2); } } } } |