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
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
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... okéball ! -->
</div>
</code>
Dans ce cas précis, au lieu d’une deuxième classe, vous pourriez aussi y... ttent quelques réserves sur certains principes.
Au milieu de cette jungle de “c’est moi qui ai raiso
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
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... ir du HTML en le compilant ;
- de passer du CSS au SCSS puis au Sass pour aider votre navigateur à l
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
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... e valeur de couleur en temps normal, ou la mettre au four : 😉
Dans notre cas, nous avions :
<code sa... es_et_mixins|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[240_adapter_code_a_tout_support|Su
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
éveloppement web css sass html}}
====== Passez au niveau supérieur avec Sass ======
Notes et trans... 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
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
>
++++ 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]]
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_struc
