par exemple, qui indique que l’on passe la souris au-dessus du sélecteur. Les attributs permettent de ... s différents, mais peuvent quand même s’appliquer au même élément.
La spécificité permet donc d’**att... autre.
Voyez ça comme les types dans Pokémon : eau, feu, glace, psy… l’issue d’un match est certes déterminée par le niveau du pokémon, mais nous savons tous dans le fond qu
ntervient le nesting !
===== Hiérarchisez grâce au nesting =====
De la même façon que vous imbrique... compilé.
</note>
===== Incorporez les sélecteurs au nesting =====
Il n’y a pas réellement de limite ... rofondeur du nesting qu’on peut opérer dans Sass. Au début de mon apprentissage, j’ai plusieurs fois t... ite-fille-div {
color: #D6FFF5;
}
</code>
<note>
Au lieu de répliquer exactement la structure du HTML
bre ne plaît plus du tout. On vous envoie un nouveau visuel :
{{maquette_modification_titre.png}}
La... e dans le brief !
Wow. Là c’est bien flashy niveau couleur !
Avant même de commencer à coder, posez... oyer dans une complexité de définitions. 😵💫 Bien au contraire !
Tout d’abord, qu’est-ce qu’une fonct... aleur sans que vous n’ayez à le faire vous-même.
Au secours ? Définition numéro 2 ?
J’adore les méta
ux premières réponses sont fausses car contraires au principe du DRY : éviter les répétitions.
La der... s du DRY. Vous obtenez deux nouveaux boutons mais au prix de multiples répétitions.
Pour la troisième... dans votre HTML (ou inline), le navigateur passe au suivant : id. Un ID est déclaré, c’est donc lui q... mon site </h1>
<p> Introduction de mon nouveau site internet </p>
<ul>
<li>A
et CSS3]].
</note>
Les media queries indiquent au navigateur d’**utiliser un ensemble de règles** s... uery. Dès que la résolution de l’écran correspond au breakpoint, alors le breakpoint prendra le pas su... t ordonne les éléments sur **une seule colonne**. Au final, cette section est bien plus lisible de cet... lisible et mieux organisé, placer les sélecteurs au sein de la media query signifie qu’**ils ne feron
kémons, l’idéal serait qu’en un simple coup d'œil au nom d’une classe, on comprenne son usage et comme... dre nos classes plus compréhensibles, et ce grâce au **nommage**.
**BEM** est l’acronyme de **B**loc... ité et ses relations. Pas mal, non? Mais que sont au juste ces blocs, éléments et modificateurs ?
==... AIT !
===== Ajoutez des éléments =====
Passons au **E** de **BEM**: **E**lement (ou élément, en fra
, vos projets grossissent, tout s’entasse et un beau jour on regrette amèrement de ne pas avoir pris l... fication générale que vous pourrez appliquer tout au long de votre parcours professionnel, quels que s... re HTML avec BEM]]
* [[140_utiliser_sass|Passez au niveau supérieur avec Sass]]
* [[150_quiz_structurer_son_code|Quiz : Structurer son code]]
=====
und-color: #e67e22;
}
</code>
Pour le CSS on est au top : notre code est plus lisible et donc plus pr... tons et rien de plus. Ensuite, pour chaque bouton au design particulier, nous avons défini de nouvelle... le classe prend le dessus sur une autre ?
Passez au chapitre suivant pour approfondir vos connaissanc... notamment la spécificité.
[[000_start|⌂ Retour au sommaire]] |
[[120_definir_les_priorites|Suivant
éveloppement web css sass html}}
====== Passez au niveau supérieur avec Sass ======
Notes et transcriptions du cours [[https://openclassrooms.com/fr/c... Quand on parle de Sass, ce sera souvent du SCSS. Au final, vos chances d’écrire du ''.scss'' dans vot... html_via_bem|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[150_quiz_structurer_son_code|Suiva
r et le tour est joué ! (De plus, le reste du bureau ne pourra pas faire semblant, votre nom est sur c... ci on parlera de la mixin en tant que règle, donc au féminin (entre nous, en anglais on ne donne pas d... s mixins sont très similaires aux variables, mais au lieu de ne stocker que des valeurs, elles stocken... ture_du_code|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[230_ameliorer_mixins_via_fonctions
ande envergure.
Et imaginez que vous travailliez au café, dans le train ou simplement dans un endroit... ra plus lente que les précédentes options listées au-dessus. Mais l’interface sera la même, dans tous ... ités de Sass, dans le but de le rendre accessible au plus grand nombre. Durant votre carrière, vous se... tout_support|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[260_quiz_optimiser_css_avec_sass|S
>
++++ Réponse|
Choix 3. La réponse 1 correspond au combinateur adjacent : la couleur sera appliquée ... rluette permet de relier directement le sélecteur au sélecteur parent, la réponse 3 est fausse car dan... usieurs arguments.
++++
[[250_deployer_code_sass|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]]
