s://openclassrooms.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le... ous les utilisons sans arrêt. Entre nous, je suis incapable de retenir les couleurs par leur **code co... les valeurs à la main, une par une.
Reprenons l’introduction de notre site, que remarquez-vous ?
<c... ss>
.navbar__link--purple {
color: #a5b4fc;
}
.intro__title {
margin-bottom: 15px;
font-size: 3
je vous expliquais que les navigateurs ne peuvent interpréter Sass par eux-mêmes, et que c’est pourquo... gne pour pouvoir pratiquer votre code Sass sans l’installer sur votre ordinateur.
* [[https://codep... e mieux que de pouvoir essayer en ligne sans rien installer. Seulement, comment faire dans le cas où v... ce sans vous perdre dans des milliers de lignes d’installations, de bugs, de librairies qui ne fonctio
|Openclassrooms]].
Vous avez créé un mixin pour incorporer une bordure sur le titre du portfolio de ... r cette ombre. Quelle serait la meilleure façon d’intégrer cette proposition en tenant compte de votre... ent cette mixin est-elle utilisée ?
<code sass>
.intro__title {
color: $title-color;
@include title-shadow;
}
</code>
La mixin ''title-shadow'' est
tre catégories de règles CSS :
==== 1 - Le style inline, défini directement dans le HTML ====
Lorsqu... CSS dans du HTML, c’est ce qu’on appelle du style inline.
<code html>
<div style="background-color: r... er un état**, comme '':hover'', par exemple, qui indique que l’on passe la souris au-dessus du sélect... org/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%C3%A9cificit%C3%A9|documentation MDN]
===
<note>
Les media queries sont des règles qui indiquent quand on doit appliquer des propriétés CSS... b. Cette notion est abordée dans le cours [[cours:informatique:dev:web:creez_votre_site_web_avec_html5... avec HTML5 et CSS3]].
</note>
Les media queries indiquent au navigateur d’**utiliser un ensemble de ... iquera votre code si la largeur du navigateur est inférieure à 600 pixels.
Petit moment culture et vo
épétitions.
La dernière réponse part d’une bonne intention, c’est une bonne idée dans un premier temp... pe de la spécificité et les règles de priorité :
inline > id > classes > éléments.
Dans le HTML sont... er.
Il n’y a pas de code CSS dans votre HTML (ou inline), le navigateur passe au suivant : id. Un ID ... ;
- Compiler votre code pour qu’il puisse être interprété par tous les navigateurs
++++ Réponse|
C
-button;
}
</code>
- <code sass>
.button {
@include round-button;
}
</code>
- <code sass>
.but... oix 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
lasse, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
On retrouve les es... d’une page qui est **autonome et peut fonctionner indépendamment du reste de la page**. Cela peut être... faut leur donner un nom. Le nom d’un élément doit indiquer deux choses :
* son **bloc parent**, sui... lass="navbar>
<a class="navbar__link" href="index.html">Accueil</a>
<a class="navbar__link
st pas très efficace et on ne comprend pas trop l’intérêt d’écrire du CSS dans un fichier ''scss'', n’est-ce pas ? C’est ici qu’intervient le nesting !
===== Hiérarchisez grâce a... en temps réel le code CSS compilé.
</note>
===== Incorporez les sélecteurs au nesting =====
Il n’y a... entissage, j’ai plusieurs fois tenté de répliquer intégralement mon HTML dans Sass en pensant gagner d
pratique, le souci c’est que les navigateurs sont incapables d’utiliser Sass en l’état. Pour ça, il vo... r ''.scss'', et le tour est joué. Votre code sera interprété et votre CSS sera exécuté, mais ne sera p... toutes les fonctionnalités Sass, et c’est tout l’intérêt !
En “.scss”, cela donnerait :
<code sass... : 10px 10px red;
}
.nav {
color: white;
@include shadow;
}
</code>
Ce qui nous donnera en CS
