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 une liste sass intitulée $animaux et contenant les animaux suivants : chat, chien, poule et poisson.

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

.animal-poule {
	width: 50%;
}

HTML: Créez un set d’exemples permettant de tester vos classes dans votre page html.

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 $animaux.

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 $animaux.

SCSS : Créez une liste sass intitulée $villes et contenant les villes suivantes : Lyon, Paris, Marseille, Montpellier, 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-bourg-de-peage::before {
	display: block;
	content: 'Bourg de Péage';
}

HTML: Créez un set d’exemples permettant de tester vos classes dans votre page html.

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 le tableau créé à la question suivante pour créer une série de classes sous la forme suivante :

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

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 la précédente.

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 d’ajouter un arrondi à un élément à partir de 1, 2 ou 4 valeurs. Deux valeurs saisies permettent de distinguer les coins supérieurs des coins inférieurs.

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 dégradé linéaire sur un élément à partir d’une direction et d’un nombre indéfini de couleurs. La première couleur saisie sera également définie comme couleur d’arrière-plan.

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

SCSS : Dupliquez le mixin dégradé créé précédemment, puis modifiez-le afin de faire un « aller-retour » avec les couleurs. Exemple : l’utilisateur saisie purple, yellow et red, le dégradé sera purple, yellow, red, red, yellow et purple.

SCSS : Corrigez votre dernier mixin pour éviter de dupliquer la dernière couleur (red dans l’exemple fourni).

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.

Cela peut vous intéresser :

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.