titions**. Je vous ai préparé un exemple qui sera plus parlant que 10 000 mots ! Partons à la chasse aux... ne codebase **DRY**, et rendent votre code encore plus difficile à maintenir et à modifier.
Je vous pr... des règles additionnelles pour rendre notre code plus lisible pour des cas bien précis.
On commence p... ns le but d’une amélioration. Que ce soit un code plus lisible, plus rapide, ou qui consomme moins, le b
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
se passe-t-il ?
La largeur de notre div ne fait plus que 10px, contrairement aux 500px établis dans no... igateur suit l’ordre des priorités. L’ ''id'' est plus fort que la classe.
Oui bon, en soi si on a un s... iliser.
</note>
Comme les id ont une spécificité plus importante, il est difficile de les outrepasser. ... ous ferez en sorte qu’ils aient une **spécificité plus basse**, ce qui les rendra plus faciles à contour
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... e si vous souhaitez travailler sur des projets de plus grande envergure.
Et imaginez que vous travailli... ll -g sass
</code>
Attention, cette version sera plus lente que les précédentes options listées au-dess
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... s vouliez faire en sorte que le lien Accueil soit plus voyant, et d’une couleur différente :
{{liens_na
é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... eviennent trop spécifiques se verront accorder un plus grand score par le navigateur, et seront donc app... iser votre code.
Nous avons effectué la forme la plus simple de **nesting** dans Sass : placer un sélec
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
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
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... ou plusieurs arguments. La fonction retournera la plus grande valeur parmi celles données. Les réponses ... rguments. La fonction max va prendre la valeur la plus haute parmi celles données. Il n’y en a qu’une ic
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
