pement web css sass html}}
====== Utilisez les variables et mixins ======
Notes et transcriptions ... s.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le site de Robbie L... *tous** vos fichiers CSS, modifier **TOUTES** les valeurs à la main, une par une.
Reprenons l’introdu... us **lisible** et **organisé** ? Mmmh... si on pouvait définir une couleur **une seule fois** et la **
!
Wow. Là c’est bien flashy niveau couleur !
Avant même de commencer à coder, posez-vous, et analy... em $dark-purple;
}
</code>
Vous avez :
* deux variables ''$title-color'' et ''$dark-purple'' qui ... title%%''. Ici, le titre.
* Créer de nouvelles variables de couleur ? Vous savez faire. ✅
* Créer... donc en haut du document pour créer une nouvelle variable pour la coul... stooooooop. 🛑
Dans ce cas-
erluette est un préfixe que vous pouvez ajouter devant un sélecteur pour le relier directement à son s... tion 2 =====
En vous basant sur le code HTML suivant,
<code html>
<section>
<h1>Titre</h1>
<ul>...
===== 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
nt un ordre bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis... r le HTML la tâche reste simple, pour le CSS en revanche c’est une autre histoire : en CSS, certaines ... ut style, puis en passant aux id et aux classes, avant de finir par vos éléments :
la chaine de prior... argin: auto;
}
Modifions le CSS initial comme suivant :
<code css>
#carapuce {
background-image: ur
s lire et les utiliser.
Mais attends, du coup on va devoir tout réécrire en Sass dans un fichier .sas... color: #a5b4fc;
}
}
}
</code>
==== Les variables ====
Les variables vous permettent de **stocker des valeurs répétées fréquemment**, comme par exemple les couleur
s n’êtes pas l’enfant de vos grands-parents, en revanche vous êtes leur descendant.
Un élément enfant... ttons que vous ayez à présent besoin de créer une variation de votre ''%%.nav__link%%'' pour changer s... e //relier//. Mettre une esperluette en préfixe devant un sélecteur le reliera directement au sélecteu... text-decoration: none;
}
}
</code>
Sass va remplacer l’esperluette &, par le sélecteur paren
ouleur de fond est #185730.
et ce, tout en conservant les propriétés de votre premier bouton ci-desso...
- Vert
- Bleu
++++ Réponse|
Choix 3. En suivant le principe de la spécificité et les règles de ... votre HTML (ou inline), le navigateur passe au suivant : id. Un ID est déclaré, c’est donc lui qui l’e... = Question 6 =====
En vous basant sur le HTML suivant,
<code html>
<div class="header">
<h1>
tions ! 🎉 YOU DID IT ! Vous avez fini ce cours.
Avant de vous laisser partir et voler vers d’autres h... oulez quand même pouvoir poster en ligne votre travail Sass, et ce sans vous perdre dans des milliers ... e solution sur le long terme si vous souhaitez travailler sur des projets de plus grande envergure.
Et imaginez que vous travailliez au café, dans le train ou simplement dans u
ne propriété apparaît plusieurs fois avec la même valeur, c’est que vous avez trouvé une partie à amél... nos boutons ont les mêmes propriétés et les mêmes valeurs.
Reprenons-les et créons une nouvelle class... ion et notamment sur les standards HTML, CSS ou JavaScript. Jetez-y un œil, ça vaut le détour.
</note>
Prenons par exemple notre bouton aux angles arrond
ez-moi vous présenter **BEM**, une convention qui va nous aider à rendre nos classes plus compréhensib... propos et Portfolio.}}
La barre de navigation servant d'exemple
Qu'observez-vous ? Notre header cont... ntient plusieurs liens.
On nomme un bloc en décrivant sa **fonction**. Nommons notre bloc pour notre ... nir_les_priorites|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[140_utiliser_sass|Suivant ▷]]
s propose de répondre aux trois problématiques suivantes :
* Comment écrire du CSS qui soit clair, ... SS ! Anticiper la façon de structurer votre code avant d’écrire la moindre ligne de code est très impo... Optimisez la lecture du code]]
* [[220_utiliser_variables_et_mixins|Utilisez les variables et mixins]]
* [[230_ameliorer_mixins_via_fonctions|Améliore
les éléments, et ça nous rajoute encoooore du travail d’écriture...
Eh oui, comme toujours, Sass est... déployer votre code Sass en ligne. C'est ce qu'on va voir dans le prochain et dernier chapitre.
[[... ia_fonctions|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[250_deployer_code_sass|Suivant ▷]]
