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.

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

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

SCSS : Créez une liste sass intitulée $fruits et contenant les éléments suivants : banane, cerise, ananas et 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%;
}

SCSS : Créez un mixin générique correspond au code de la question précédente.

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…

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.

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';
}

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.

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.

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.

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.

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.

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.