Quiz : Optimiser son CSS avec Sass
Question 1
Dans Sass, lorsque vous utilisez &, sous quelle forme se compile le symbole esperluette (&) ?
L’esperluette (&)
Le combinateur adjacent
Le combinateur descendant
Le sélecteur parent
Le sélecteur enfant
Réponse
Choix4. L’esperluette est un préfixe que vous pouvez ajouter devant un sélecteur pour le relier directement à son sélecteur parent.
Dans Sass, l’esperluette se compile en tant que sélecteur parent, ce qui facilite la construction et la maintenance de notions complexes telles que BEM, ou de pseudosélecteurs tels que :hover.
Question 2
En vous basant sur le code HTML suivant,
<section>
<h1>Titre</h1>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</section>
Quel combinateur applique la couleur bleue aux éléments de notre liste ?
section + li {
color: blue;
}
section > li {
color: blue;
}
section li {
color: blue;
}
Réponse
Choix 3. La réponse 1 correspond au combinateur adjacent : la couleur sera appliquée à l’élément <li>, si celui-ci est précédé directement de section. Ici ce n’est pas le cas, <li> est précédé de <ul> et non <section>.
La réponse 2 est un combinateur parent > enfant. Le sélecteur parent de <li> n’est pas section mais bien ul. Cette réponse est fausse. Si vous vouliez utiliser le combinateur parent > enfant, il aurait fallu avoir ul > li.
La réponse 3 est un combinateur descendant. Votre li est bien un descendant de section.
Question 3
Avec le code Sass ci-dessous,
.block {
&__element {
background-color: #15dea5;
}
}
sous quelle forme sera compilé ce code ?
.block&__element {
background-color: #15dea5;
}
.block__element {
background-color: #15dea5;
}
.block .block__element {
background-color: #15dea5;
}
.block .__element {
background-color: #15dea5;
}
Réponse
Choix 2.
Quand vous nestez vos sélecteurs dans Sass, après la compilation, l’esperluette est remplacée par le nom du parent.
La réponse 1 est fausse car une fois compilé, le symbole “&” disparaît.
La réponse 4 est fausse, car une fois compilé, le symbole disparaît mais se fait remplacer par le sélecteur parent.
L’esperluette permet de relier directement le sélecteur au sélecteur parent, la réponse 3 est fausse car dans ce cas, on obtient un combinateur descendant.
Le préfixe “&” est donc remplacé par le parent, ici .block une fois compilé, ce qui crée un sélecteur nommé .block__element. La bonne réponse est la 2 !
Question 4
Vous devez déclarer une variable appelée button-radius pour stocker la valeur de l’arrondi de vos boutons. Quelle serait la bonne syntaxe ?
$border-radius: 30px;
&button-radius: 30px;
$button-radius: 30px;
&button-radius = 30px;
Réponse
Choix 3.
Pour déclarer une variable, tapez le symbole “$” suivi du nom de votre variable, et enfin la valeur.
$nom-de-la-variable: valeur;
Les réponses 2 et 4 sont fausses : on utilise le symbole “$” et non ”&”. De plus on utilise les “:” pour assigner une valeur et non le symbole “=”.
La réponse 1 n’est pas fausse en soi, mais ne répond pas à notre énoncé, le nom de la variable est button-radius et non border-radius.
Ici, la réponse 3 est la bonne !
Question 5
Vous souhaitez utiliser la mixin suivante et l’appliquer à un bouton :
@mixin round-button {
border-radius: 30px;
}
Quelle serait la bonne syntaxe ?
.button {
@round-button;
}
.button {
@include round-button;
}
.button {
@mixin round-button;
}
.button {
round-button;
}
Réponse
Choix 2.
Pour pouvoir utiliser une mixin, il faut l’inclure dans le sélecteur avec le nom de la mixin précédé de @include.
La réponse 1 est fausse, le symbole @ doit être suivi de include et non du nom de la mixin directement.
La réponse 3 est fausse puisque @mixin sert à déclarer une mixin et non à l’utiliser.
Pour que la réponse 4 soit juste, il faudrait faire précéder le nom de la mixin par @include.
La bonne réponse est donc la 2.
Question 6
En vous basant sur le code ci-dessous,
@mixin mobile-only {
@media screen and (max-width: 599px){
margin: 2rem;
}
}
.block {
margin: 1.5rem;
@include mobile-only
}
Quelle sera la margin de .block si la largeur du navigateur est de 480 px ?
2 rem
1,5 rem
3,5 rem
0 : il n’y aura pas de margin
Réponse
Choix 1.
La mixin mobile-only contient une media query pour un écran d’une largeur maximale de 599 px.
Si l’écran a une largeur de 599 px ou moins, alors le navigateur appliquera les règles contenues dans la media query.
Étant donné que la largeur du navigateur est de 480 px, celui-ci appliquera l’ensemble de règles inclus dans la mixin mobile-only dans .block, donc une marge de .2rem.
L’équivalent en CSS compilé serait :
code css>
.block {
margin: 1.5rem;
}
@media screen and (max-width: 599px) {
.block {
margin: 2rem;
}
}
</code>
Question 7
Sass nous offre tout un tas d’outils très utiles que l’on appelle fonctions. Mais qu’est-ce qu’une fonction ?
Un synonyme de documentation, le mode d’emploi de Sass.
Une liste de variables que l’on peut utiliser et manipuler comme on veut.
Un moyen de nester et optimiser le code en augmentant la spécificité des sélecteurs.
Un ensemble de règles qui vous permet de de stocker du code ou un ensemble de valeurs.
Un bout de code Sass prêt à l’emploi que l’on peut utiliser pour manipuler des valeurs ou effectuer des tâches.
Réponse
Choix 5.
Les fonctions sont des bouts de code préfabriqués prêts à l’emploi (comme une pâte à pancakes !) qui effectuent des tâches sans que vous n’ayez à le faire vous-même, comme changer une couleur, ou modifier un texte.
Question 8
Rendez-vous sur la documentation Sass de la fonction max. La fonction max vous permet d'obtenir la plus grande valeurs parmi une liste d'expressions.
On vous donne un titre :
<h1>Titre</h1>
Comment faites-vous pour utiliser la fonction max afin d’obtenir le code compilé ci-dessous ?
h1 {
font-size: 50px;
}
Plusieurs réponses possibles :
h1 {
font-size: max(50px);
}
h1 {
font-size: @include max(50px);
}
h1 {
font-size: max(5px, 30px, 50px);
}
-
Réponse
Choix 1 et 3.
Pour utiliser une fonction, il faut l’appeler par son nom. La réponse 2 est fausse car @include est utilisé pour les mixins et non les fonctions.
On utilise le symbole $ pour appeler une variable et non une fonction, la réponse 4 est donc fausse.
D’après la documentation, la fonction max prend un ou plusieurs arguments. La fonction retournera la plus grande valeur parmi celles données. Les réponses 1 et 3 sont justes.
On appelle la fonction max, suivie des arguments. La fonction max va prendre la valeur la plus haute parmi celles données. Il n’y en a qu’une ici : 50 px ! Cette option n’est pas la meilleure en termes d’optimisation de code, mais elle reste juste !
Comme la réponse 3, qui est aussi juste. La fonction accepte un ou plusieurs arguments.
◁ Précédent |
⌂ Retour au sommaire
