titions**. Je vous ai préparé un exemple qui sera plus parlant que 10 000 mots ! Partons à la chasse aux...
Nous avons 4 boutons, si une propriété apparaît plusieurs fois avec la même valeur, c’est que vous ave... e tous nos boutons, malgré leurs différences, ont plusieurs propriétés communes : le même padding, le mê... ne codebase **DRY**, et rendent votre code encore plus difficile à maintenir et à modifier.
Je vous pr
comme ça, alors ?
Coder en utilisant une syntaxe plus cohérente c’est bien pratique, le souci c’est que... qui vont vous permettre d’écrire du code propre, plus organisé et surtout plus efficace. Il existe deux manières d’écrire du Sass ; on les différencie par le... CSS normal, tandis que le ''.sass'' a une syntaxe plus condensée et concise. En ''.sass'', dites adieu a
ment de programme, la couleur de l’ombre ne plaît plus du tout. On vous envoie un nouveau visuel :
{{ma... couleur**, seulement il vous faut une ombre, mais plus claire. Et puis un jour, une autre ombre mais plus foncée.
Créer une toute nouvelle variable pour chaq... r vous. Votre objectif, c’est de coder de manière plus lisible, sereine et organisée certes, mais surtou
''id'' sont uniques. Vous ne pouvez pas utiliser plusieurs fois un ''id'' dans votre HTML.
<code html>... Les **classes** permettent d’appliquer un style à plusieurs éléments.
Une **pseudo-classe** est un mot ... t le navigateur décide quelle règle s’applique si plusieurs règles ont des sélecteurs différents, mais ... se passe-t-il ?
La largeur de notre div ne fait plus que 10px, contrairement aux 500px établis dans no
smeister.com/|SassMeister]]
Nous l'avons utilisé plusieurs fois pour comparer notre code Sass et le rés... SCSS depuis une source externe ou un fichier. En plus de compiler votre code, vous pourrez télécharger ... tions, de bugs, de librairies qui ne fonctionnent plus, et j’en passe ?
[[https://pages.github.com/|Gi... imenter. Seulement, vous ne pourrez pas coder sur plusieurs fichiers, ni intégrer des images depuis votr
éthode consiste à :
- répéter les sections les plus utilisées ;
- dupliquer les sélecteurs pour les rendre plus spécifiques ;
- refactoriser le code afin d’évi... de dupliquer vos sélecteurs pour obtenir un code plus lisible et plus précis.
++++ Réponse|
Choix 1. La réponse 2 n’est pas la définition de la spécificité
xe est importante et nous permet d’écrire du code plus organisé, certes ; mais seule, elle n’est pas trè... lor: #a5b4fc;
}
</code>
On obtient bien un code plus lisible et compréhensible !
<note>
Si vous souha... er dans Sass. Au début de mon apprentissage, j’ai plusieurs fois tenté de répliquer intégralement mon HT... eviennent trop spécifiques se verront accorder un plus grand score par le navigateur, et seront donc app
penclassrooms]].
Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce ... convention qui va nous aider à rendre nos classes plus compréhensibles, et ce grâce au **nommage**.
**... ous allons prendre comme exemple notre header, et plus précisément notre barre de navigation.
{{exemple... de navigation. Notre barre de navigation contient plusieurs liens.
On nomme un bloc en décrivant sa **f
ux ?
Imaginez : notre cher Robbie Lens n’en peut plus du violet et veut que son site soit orange. Vous ... fois. Minimum.
Comment faire pour rendre ce code plus **lisible** et **organisé** ? Mmmh... si on pouva... ne boîte, de l'utiliser et le tour est joué ! (De plus, le reste du bureau ne pourra pas faire semblant,... ance/utilisation. Rappelez-vous : on veut un code plus lisible, moins compliqué et sans répétition. Par
ausses : on utilise le symbole “$” et non ”&”. De plus on utilise les “:” pour assigner une valeur et no... n max]]. La fonction max vous permet d'obtenir la plus grande valeurs parmi une liste d'expressions.
On... ?
<code css>
h1 {
font-size: 50px;
}
</code>
Plusieurs réponses possibles :
- <code sass>
h1 {
... rès la documentation, la fonction max prend un ou plusieurs arguments. La fonction retournera la plus gr
mbles de règles spécifiquement adaptés aux écrans plus petits, comme une tablette, voire un téléphone.
... de>
{{rendu_avec_media_queries.png}}
C'est déjà plus lisible !
Ah ! Alors ce n’est pas encore parfait... de se passer : lorsque la taille de l’écran n’est plus adaptée et atteint le breakpoint, la propriété ''... seule colonne**. Au final, cette section est bien plus lisible de cette manière sur petit écran.
Mainte
r que le code est maintenable ?
* Comment coder plus vite et de manière plus efficace ?
Ce cours se décompose en deux parties. Avec la première vous appren
