s html}}
====== Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cours [[https... autre solution. 💪
===== Découvrez la magie des fonctions =====
Il se trouve que Sass a une sacrée boîte ... uleurs]] ! 🎉
</note>
On appelle ces outils des **fonctions**.
En programmation, les fonctions sont omniprésentes, et je sais qu’elles peuvent faire peur. Soyez rass
tout un tas d’outils très utiles que l’on appelle fonctions. Mais qu’est-ce qu’une fonction ?
- Un synonyme de documentation, le mode d’emploi de Sass.
- Une lis... ffectuer des tâches.
++++ Réponse |
Choix 5.
Les fonctions sont des bouts de code préfabriqués prêts à l’em... ntation/modules/math#max|documentation Sass de la fonction max]]. La fonction max vous permet d'obtenir la p
t à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément. D’où l’importance de bien n... is catégories, vous serez en mesure de définir sa fonctionnalité et ses relations. Pas mal, non? Mais que so... une section d’une page qui est **autonome et peut fonctionner indépendamment du reste de la page**. Cela peu... sieurs liens.
On nomme un bloc en décrivant sa **fonction**. Nommons notre bloc pour notre barre de navigat
Exactement comme en HTML ! Eh bien, c’est une des fonctionnalités de Sass : le nesting.
Pourquoi on ne code... Sass dans un fichier .sass ?!
Oh que non ! Sass fonctionne très bien avec le CSS. Copiez votre CSS et coll... *syntaxe**, car elle vous permet de bénéficier de fonctionnalités qui vont vous permettre d’écrire du code p... du CSS. Et ce, tout en bénéficiant de toutes les fonctionnalités Sass, et c’est tout l’intérêt !
En “.scs
chaque sélecteur à une catégorie pour définir sa fonctionnalité et ses relations ;
- de dupliquer vos sél... rs à une de ces trois catégories ;
- Définir la fonctionnalité et les relations d’un sélecteur par son nom... is catégories, vous serez en mesure de définir sa fonctionnalité et ses relations par leur nom.
++++
=====... .headers est suivi de deux underscores puis de la fonction de l’élément, ici : title !
++++
===== Question
''background'' dans le chapitre précédent ? Cela fonctionne sur le même principe : on va pouvoir combiner p... Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouve... , etc.
Ce sont aussi des super-propriétés, elles fonctionnent comme ''border'' mais elles ne s'appliquent ... votre texte. Effet vintage garanti !
Les valeurs fonctionnent exactement de la même façon que ''box-shadow'
buts indispensables pour construire un formulaire fonctionnel :
* L'attribut ''method'' indique par quel ... ts à la balise ''<input>'' pour personnaliser son fonctionnement :
* agrandir le champ avec ''size'';
*... re, date et curseur, vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :
*... vec les balises <select> et <option> ====
Le fonctionnement est un peu différent :
- On utilise la b
egroupant vos classes et en les séparant par leur fonction, votre codebase devient plus **facile à maintenir... r trop de règles. Séparer les sélecteurs par leur fonction vous aidera à garder votre code compréhensible et... e sur le long terme.
* Nommez vos sélecteurs en fonction de leur utilité.
Vous venez de franchi... e code et le simplifier en créant des classes par fonction. Mais comment définir quelle classe prend le dess
sque vous nommez vos variables. ''$light-purple'' fonctionne très bien pour un violet clair c’est sûr, seule... es **booléens** (boolean), les **nulls** et les **fonctions**.
<note>
Dans ce cours, nous aborderons seulem... ins pour qu’ils s’adaptent encore plus, grâce aux fonctions ? C’est ce que nous allons découvrir dans le pro... u_code|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[230_ameliorer_mixins_via_fonctions|Suivant ▷]]
nt quand on doit appliquer des propriétés CSS, en fonction de la taille de l'écran sur lequel s'affiche le s... ** sous certaines conditions. Dans notre cas : en fonction de la taille de l’écran. Si c’est pour un écran d... mme une tablette, voire un téléphone.
Comment ça fonctionne ? La syntaxe CSS standard des media queries con... dernier chapitre.
[[230_ameliorer_mixins_via_fonctions|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire
es d’installations, de bugs, de librairies qui ne fonctionnent plus, et j’en passe ?
[[https://pages.githu... aire ?
En lisant la documentation 😊 !
<note>
En fonction de vos OS, l’installation varie. Reportez-vous à ... du cours, nous avons omis de parler de plusieurs fonctionnalités de Sass, dans le but de le rendre accessib... tre carrière, vous serez amené à croiser d’autres fonctionnalités de Sass :
* [[https://sass-lang.com/gui
er le contenu de pages web]]
===== Utilisez des fonctionnalités avancées de HTML et CSS =====
* [[405_a... _aller_plus_loin|Allez plus loin]]
* [[430_quiz_fonctionnalites_avancees_html_et_css|Quiz : Utiliser des fonctionnalités avancées de HTML et CSS]]
tantes afin de créer des apparences dynamiques en fonction des interactions avec les utilisateurs.</p>
</d... plus le navigateur est vieux, moins il connait de fonctionnalités CSS.
</note>
Je vous recommande fortement... om]], qui propose des tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs
elques éléments supplémentaires si on veut que ça fonctionne. Pour ce faire, il s'agit de se demander commen... rcentage.
… et vous pouvez ajuster la taille en fonction de la colonne. Par exemple :
<code css>
.contene... ' et les rangées avec ''grid-template-rows'' : en fonction du nombre de valeurs passées, de nouvelles colonn
nt quand on doit appliquer des propriétés CSS, en fonction de la taille de l'écran sur lequel s'affiche le s... ermettent d'adapter la présentation du contenu en fonction de la résolution des différents écrans. Le conten... e vous savez comment sélectionner des éléments en fonction des différentes tailles d'écran, vous allez égale
