t bien un code plus lisible et compréhensible !
<note>
Si vous souhaitez vous entraîner et comparer ce ... t d’observer en temps réel le code CSS compilé.
</note>
===== Incorporez les sélecteurs au nesting ====... v .petite-fille-div {
color: #D6FFF5;
}
</code>
<note>
Au lieu de répliquer exactement la structure du ... t donc de vous donner une certaine maniabilité.
</note>
Par exemple, si vous avez ce code et que vous v
correspondante :
{{comparaison_css_sass.png}}
<note>
Ne soyez pas trop spécifique lorsque vous nommez... ain-color''** (couleur principale, en anglais).
</note>
Le nom de la variable vous indique que son rôle... !
===== Créez des ombres avec une mixin =====
<note>
En programmation objet, on dit un **ensemble de ... pas de genre, donc bon, on va pas chipoter 😉).
</note>
Plutôt que d’être limités à des valeurs, les mi
===== Révisez les principes du responsive =====
<note>
Les media queries sont des règles qui indiquent ... ries|Créez votre site web avec HTML5 et CSS3]].
</note>
Les media queries indiquent au navigateur d’**... edia queries sont appelées des **breakpoints**.
<note>
Les breakpoints représentent les **limites** lié... non les ensembles de règles liés s’appliquent.
</note>
Pour notre exemple, nous avons créé une media q
e boîte à outils mais une grande, la totale ! 🛠
<note>
Si vous y jetez un œil, vous découvrirez qu’il y... ules/color|uniquement dédiés aux couleurs]] ! 🎉
</note>
On appelle ces outils des **fonctions**.
En pr... entation/modules/color#darken|documentation]] !
<note>
La documentation, c’est le mode d’emploi, un peu... logiciel, utiliser une fonction ou un service.
</note>
Voici ce qu’on peut lire :
{{documentation_fc_
v style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très fortement ce st... t reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id'' sont uniques. ... ent, par définition, être utilisés qu’une fois.
<note>
Il est toujours judicieux de revoir les bases po... classes et id, et dans quels cas les utiliser.
</note>
Comme les id ont une spécificité plus important
nctuation vous permet aussi d’écrire plus vite.
<note>
Entre nous, il est assez rare que vous tombiez s... lerons, il s’agira de .scss et de sa syntaxe.
</note>
===== Découvrez les fonctionnalités de Sass ==... white;
text-shadow: 10px 10px red;
}
</code>
<note>
Il existe de nombreuses fonctionnalités Sass à d... /documentation/at-rules/extend|Les extensions]]
</note>
Sur CodePen, nous avons prédéfini SCSS comme pr
Comment faire ?
En lisant la documentation 😊 !
<note>
En fonction de vos OS, l’installation varie. Rep... ss-lang.com/install|documentation officielle]].
</note>
Vous pouvez installer Sass sur Windows, Mac ou ... ’est tout bon ! 🎉
===== Allez plus loin =====
<note>
Pour les besoins du cours, nous avons omis de pa... s-guidelin.es/#the-7-1-pattern|Le pattern 7-1]]
</note>
Pour continuer votre apprentissage, n’hésitez p
lecteurs.
===== Combinez les sélecteurs =====
<note>
En CSS, les sélecteurs sont utilisés pour cibler... JavaScript. Jetez-y un œil, ça vaut le détour.
</note>
Prenons par exemple notre bouton aux angles arr
votre code est plus organisé et compréhensible.
<note>
D’ailleurs, notez bien, c’est important : les sé... ont toujours implémentés sous forme de classes.
</note>
Mais pourquoi ? 🤔
Vous devez être sûr que **vo
