Mixins et listes Sass CSS24

Cet exercice consiste à utiliser le langage sass afin de créer diverses fonctions et mixins avec en utilisant des listes et des tableaux indexés (maps).

Consignes de l’exercice

Créez un dossier racine contenant une page .html et un fichier .scss.

SCSS : Utilisez une boucle permettant de créer la série de quatre classes ci-dessous. Le code doit être adaptable pour obtenir un nombre de classes différents sur le même principe, le nombre de colonnes doit donc être placé en variable.

.col-1 {
    width: 25% ;
}
.col-2 {
    width: 50% ;
}
.col-3 {
    width: 75% ;
}
.col-4 {
    width: 100% ;
}
Afficher la solution SCSS

Solution SCSS :

$maxcol: 4;
@for $i from 1 through $maxcol {
    .col-#{$i} {
        width: (100% / $maxcol) * $i;
    }
}

SCSS : Créez un mixin correspond au code de la question précédente et testez-le.

Afficher la solution SCSS

Solution SCSS :

@mixin cols($maxcol){
  @for $i from 1 through $maxcol {
    .col-#{$i} {
        width: (100% / $maxcol) * $i;
    }
  }
}

@include cols(4);

SCSS : Créez une liste sass intitulée $fruits et contenant les éléments suivants : banane, cerise, ananas et pomme.

Afficher la solution SCSS

Solution SCSS :

$fruits: banane cerise ananas pomme;
$fruits: banane, cerise, ananas, pomme;
$fruits: "banane", "cerise", "ananas", "pomme";

SCSS : Utilisez une boucle permettant de créer une série de classes CSS pour chacun des fruits sous la forme suivante :

.fruit-banane {
  width: 50%;
}
.fruit-cerise {
  width: 50%;
}
.fruit-ananas {
  width: 50%;
}
.fruit-pomme {
  width: 50%;
}
Afficher la solution SCSS

Solution SCSS :

$fruits: "banane", "cerise", "ananas", "pomme";
@each $fruit in $fruits {
    .fruit-#{$fruit} {
      width: 50%;
    }
}

SCSS : Créez un mixin générique correspond au code de la question précédente. La liste des fruits et le préfixe doivent être des variables.

Afficher la solution SCSS

Solution SCSS :

@mixin listWidth($prefix, $list){
  @each $element in $list {
    .#{$prefix}-#{$element} {
      width: 50%;
    }
  }
}

$fruits: "banane", "cerise", "ananas", "pomme";
@include listWidth('fruit',$fruits);

SCSS : Créez une fonction sass permettant de renvoyer la valeur de la première entrée d’un tableau et testez-la sur le tableau $fruits.

La fonction doit renvoyer la valeur banane…

Afficher la solution SCSS

Solution SCSS :

@function firstOfList($list){
  @return nth($list, 1);
}

$fruits: "banane", "cerise", "ananas", "pomme";
.fruit::before{
  content: firstOfList($fruits);
}

SCSS : Créez une fonction sass permettant de renvoyer la valeur de la dernière entrée d’un tableau et testez-la sur le tableau $fruits.

Afficher la solution SCSS

Solution SCSS :

@function lastOfList($list){
  @return nth($list, length($list));
}

$fruits: "banane", "cerise", "ananas", "pomme";
.fruit::before{
  content: lastOfList($fruits);
}

SCSS : Créez une liste sass intitulée $villes et contenant les villes suivantes : Lyon, Paris, Marseille, Rouen et Bourg de Péage.

SCSS : Utilisez une boucle permettant de créer une série de classes css pour chacune des villes sous la forme suivante (corrigez votre liste si nécessaire) :

.ville-lyon::before {
    display: block;
    content: 'Lyon';
}
.ville-paris::before {
    display: block;
    content: 'Paris';
}
.ville-marseille::before {
    display: block;
    content: 'Marseille';
}
.ville-rouen::before {
    display: block;
    content: 'Rouen';
}
.ville-bourg-de-peage::before {
    display: block;
    content: 'Bourg de Péage';
}
Afficher la solution SCSS

Solution SCSS :

$villes: (lyon,"Lyon"), 
         (paris,"Paris"), 
         (marseille,"Marseille"), 
         (rouen,"Rouen"), 
         (bourg-de-peage,"Bourg de Péage");
  
@each $ville in $villes {
  .ville-#{nth($ville,1)}::before {
    display: block;
    content: "#{nth($ville,2)}" ;
  }
}

SCSS : Créez un mixin permettant de reproduire le code précédent de manière générique avec une option permettant d’insérer le texte avant ou après.

Afficher la solution SCSS

Solution SCSS :

@mixin addText($prefix,$list,$position:'before'){
  @each $element in $list {
    .#{$prefix}-#{nth($element,1)}::#{$position} {
      display: block;
      content: "#{nth($element,2)}" ;
    }
  }
}

$villes: (lyon,"Lyon"), 
         (paris,"Paris"), 
         (marseille,"Marseille"), 
         (rouen,"Rouen"), 
         (bourg-de-peage,"Bourg de Péage");
@include addText('ville',$villes,'after');

SCSS : Créez une liste intitulée $social et contenant :

  • Une liste de réseau sociaux : facebook, flickr, linkedin, twitter, vimeo et youtube ;
  • Une couleur pour chaque service : #3b5998, #0063db, #007bb6, #00aced, #aad450, #bb0000.

SCSS : Utilisez la liste créée à la question précédente pour générer une série de classes sous la forme suivante :

.social-nom-du-service {
    color: couleur-associee ;
    background-color: couleur-associee-plus-claire ;
}

HTML : Créez un set d’éléments permettant de tester le code de la question précédente.

SCSS : Créez un mixin permettant de reproduire le code précédent de manière générique avec une option permettant de choisir le pourcentage d’éclaircissement.

Afficher la solution SCSS

Solution SCSS :

@mixin colors($prefix,$list,$percent:30%){
  @each $element in $list {
    .#{$prefix}-#{nth($element,1)} {
      color: #{nth($element,2)};
      background-color: #{lighten(nth($element,2),$percent)};
    }
  }
}

$social: (facebook,#3b5998), 
         (flickr,#0063db), 
         (linkedin,#007bb6), 
         (twitter,#00aced), 
         (vimeo,#aad450),
         (youtube,#bb0000);
@include colors('social',$social,30%);

Modifiez le mixin créé à la question précédente afin d’ajouter une option permettant de choisir d’éclaircir ou au contraire d’assombrir la couleur secondaire.

Afficher la solution SCSS

Solution SCSS :

@mixin colors($prefix,$list,$type:"light",$percent:30%){
  @each $element in $list {
    .#{$prefix}-#{nth($element,1)} {
      color: #{nth($element,2)};
      @if($type == "light") {
        background-color: #{lighten(nth($element,2),$percent)};
      } 
      @else {
        background-color: #{darken(nth($element,2),$percent)};
      }
    }
  }
}

SCSS : Créez un tableau associatif (map) intitulée $social2 contenant les mêmes informations que $social, puis créez une série de classes sous la même forme que précédemment.

Afficher la solution SCSS

Solution SCSS :

@mixin colorsMap($prefix,$map,$type:"lighten",$percent:30%){
  @each $name, $color in $map {
    .#{$prefix}-#{$name} {
      color: #{$color};
      @if($type == "lighten") {
        background-color: #{lighten($color,$percent)};
      } 
      @else {
        background-color: #{darken($color,$percent)};
      }
    }
  }
}

$social2: (facebook : #3b5998,
           flickr : #0063db,
           linkedin : #007bb6, 
           twitter : #00aced,
           vimeo : #aad450,
           youtube : #bb0000);
@include colorsMap('social',$social2,'lighten',30%);

SCSS : Créez un tableau associatif à deux niveaux intitulé $zodiac contenant la liste des signes du zodiaque au premier niveau et les informations du signe (libellé et date) sur un deuxième niveau. À partir du tableau, créez ensuite une série de classes sous la forme suivante :

.zodiac-belier::before {
  content: "Bélier";
}
.zodiac-belier::after {
  content: "21/03 - 19/04";
}

SCSS : Créez un mixin permettant de centrer un élément dans son conteneur.

HTML: Créez un set d’exemples permettant de tester le mixin créé à la question précédente dans votre page html.

SCSS : Créez un mixin permettant de créer un triangle isocèle à partir de trois paramètres : la direction (haut, bas, gauche, droite), la taille et la couleur.

HTML: Créez un set d’exemples permettant de tester le mixin créé à la question précédente dans votre page html.

SCSS : Créez un mixin permettant de positionner un élément en absolu en utilisant un paramètre d’emplacement et une distance qui devra avoir une valeur par défaut.

HTML: Créez un set d’exemples permettant de tester le mixin créé à la question précédente dans votre page html.

Sauf mention contraire*, l'article Mixins et listes Sass [CSS24] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.