Mastering SASCH : un guide complet des préprocesseurs CSS

1. Introduntion du cours: Utilisez-vous le CSS depuis longtemps et souhaitez-vous améliorer vos compétences ? Vous avez peut-être suivi un cours de design de vagues, mais vous n'avez pas encore entièrement compris le CSS. Dans votre cas, c'est la solution qu'il vous faut. Bonjour. Je m'appelle John Shocker. Encore une fois, je suis de retour avec une nouvelle expérience passionnante : dans ce cours, nous allons apprendre le SAS du début à la fin. SAS est l'abréviation de syntaxtically awesome style sheets. Il s'agit d'un préprocesseur CSS. De nos jours, si vous voulez devenir développeur Web frontal, vous devez connaître n'importe quel préprocesseur CSS Il ne fait aucun doute que CAS est le langage d'extension CSS de qualité professionnelle le plus mature, le plus stable et le plus puissant au monde Comme je vous l'ai dit, je vais aborder tout ce qui concerne SAS dans cette série de didacticiels. Dans un premier temps, je vais vous donner une introduction approfondie de CAS, puis nous allons apprendre comment installer le compilateur CS. Nous allons aborder les variables, l' imbrication, les partiels et les importations, le mixage, les opérateurs d'extension, les fonctions, les instructions conditionnelles et les boucles Ce cours vous apportera les connaissances que vous recherchez. Nous sommes prêts à partir. Commençons. 2. Qu'est-ce que le Sass ?: Bonjour, les gars. Bon retour. Dans ce didacticiel, je vais vous présenter ce qu'est SAS ? Pourquoi devons-nous utiliser SAS ? Et comment pouvons-nous utiliser le CAS ? Notre première question est la suivante : qu'est-ce que SAS ? SAS est l'abréviation de syntaxtically awesome style sheets. Il s'agit essentiellement d'une extension CSS. Nous allons faire le même travail dans le fichier CAS. Comme nous le faisons dans le fichier CSS. Sinon, nous pouvons l'appeler préprocesseur CSS. De nos jours, il est très nécessaire que vous connaissiez n'importe quel préprocesseur CSS Il existe deux préprocesseurs CSS célèbres, SAS et moins. En comparaison, SAS est plus populaire car les SS sont dotés de fonctionnalités plus avancées que moins. Si vous terminez ce cours, je tiens à dire que si vous apprenez le CS automatiquement, vous comprendrez moins. Vous devez juste faire face à une petite différence de syntaxe, rien d'autre. Maintenant, la question est, comme je vous l'ai dit plus tôt, cela fonctionne comme du CSS. Alors pourquoi CS est plus populaire que CSS ? Parce qu'il y a des raisons. Laisse-moi te montrer. Tout d'abord, il est très facile à gérer. Lorsque nous travaillons avec du CSS, cela crée de très longs fichiers. Il est parfois très difficile de gérer de longs fichiers. Mais si nous parlons de SAS, il est très facile à gérer. La prochaine raison qui l' a rendu plus populaire, c'est qu'il augmente notre vitesse de codage par rapport au CSS normal. Mais c'est efficace lorsque vous travaillez sur de grands projets, et non sur de petits projets. Ce n'est pas très pratique pour les petits projets. Supposons que vous souhaitiez créer un site Web de cinq pages. Dans ce cas, ce n'est pas très pratique. Mais si vous travaillez avec un site Web complexe et multipage, c'est très pratique. La dernière chose qui l' a rendu plus populaire, c'est la compatibilité entre navigateurs. Lorsque vous utilisez le CSS, certaines fonctionnalités ne sont pas prises en charge dans l'ancien navigateur. Parfois, cela crée un gros problème, mais SAS ne pose aucun problème pour sa fonctionnalité intégrée, il fonctionne avec n'importe quel ancien navigateur Supposons que vous travailliez avec Internet Explorer 7, sinon, si vous travaillez avec la version Letters du navigateur Chrome, vous ne verrez aucune différence dans le résultat. Cela fonctionne de la même manière que dans la version en lettres. Voyons maintenant comment utiliser le fichier CS dans notre fichier STL. qui est étrange, c'est que nous ne pouvons pas utiliser fichier CS dans un fichier sml. Oui, c'est vrai. Nous ne pouvons pas utiliser le fichier CS directement dans Atmel. Même le navigateur ne peut pas comprendre le code SAS. Le navigateur ne peut comprendre que les fichiers CSS, pas le fichier CS. Donc, pourquoi nous avons besoin de créer un fichier CS, nous avons besoin d'un compilateur SAS. Il compile le fichier CS et le convertit en fichier CSS. Vous devez donc injecter le fichier CSS sur votre document ETL, et non sur le fichier CS Mais vous devez taper votre code dans le fichier CAS, pas dans le fichier CSS. Ensuite, vous compilez le code SAS et le convertissez en fichier CSS. Maintenant, la question est : qu'est-ce que le compilateur SAS ? Dans la vidéo suivante, nous verrons ce qu' est le compilateur Cs. Parlons maintenant des fonctionnalités OSS, et nous allons aborder ces fonctionnalités dans nos prochains tutoriels. Notre première caractéristique concerne les variables. Nous pouvons stocker de la valeur dans des variables comme dans un langage de programmation. Notre deuxième fonctionnalité est la nidification. En utilisant l'imbrication, nous pouvons assigner une classe à une autre classe. Sinon, nous pouvons utiliser une classe dans un autre identifiant. Il s'agit d'un cas d'utilisation de la nidification. Notre prochaine fonctionnalité concerne les entrées partielles. Nous pouvons créer un petit fichier cs et l'importer sous forme de modules. Notre quatrième fonctionnalité est celle des renardes. À l'aide de mixins, vous pouvez réutiliser votre code plusieurs fois. Notre cinquième fonctionnalité est l'extension. Supposons que vous saisissiez du code dans une classe, mais que vous souhaitiez réutiliser ces codes dans une autre classe. Dans ce cas, vous pouvez utiliser des extensions. Notre prochaine fonctionnalité concerne les opérateurs. Opérateur désigne les opérateurs arithmétiques. Si vous devez exécuter un calcul, dans ce cas, vous pouvez utiliser ces fonctionnalités telles que l'addition, la multiplication, la division, etc. Notre prochaine fonctionnalité concerne les fonctions. Nos SAS sont dotés de certaines fonctions voilées, que vous pouvez utiliser Comme vous pouvez créer vos propres fonctions comme le langage de programmation. Ensuite, notre avant-dernière fonctionnalité concerne les directives conditionnelles. Si vous souhaitez exécuter un travail conditionnel tel que Is condition, vous pouvez utiliser cette fonctionnalité, et notre dernière fonctionnalité concerne les boucles. Je sais que vous connaissez déjà JavaScript et d'autres langages de programmation. Alors je n'ai pas besoin d'expliquer ce que sont les boucles et à quoi servent les boucles. Vous pouvez utiliser n'importe quel type de boucle, comme une boucle à quatre boucles, une boucle Di, une boucle While, etc. Ils sont tous disponibles en SAS. Parlons maintenant de la syntaxe SAS. Fondamentalement, CSR était livré avec deux types de syntaxe, la syntaxe SCSS et la syntaxe SASS Il s'agit essentiellement d'extensions. SCS SAS. En gros, ils sont là, mais il y a une petite différence. Supposons que nous ayons une syntaxe CSS. Et comme vous pouvez le constater, nous prenons au total trois types de sélecteurs différents : NeBul Nb AI et Neb Comme vous pouvez le voir, nous devons d'abord taper les valeurs CSS NeBul. Ensuite, nous devons taper la valeur CSS Nb AI. Enfin, vous devez taper les valeurs CSS d'ancrage Neb. Mais si nous devons utiliser le même code dans la syntaxe SCSS dans ce cas, nous devons taper comme ceci Nous devons sélectionner le type d' élément Nab 1. Ensuite, à l'intérieur des alives, nous devons taper toute la syntaxe, UL, LI et A. En gros, nous appelons ce système Nous allons en apprendre davantage à ce sujet dans nos prochains tutoriels. Mais si vous tapez la syntaxe de la cellule dans du code SAS, vous devez taper comme ceci. Vous n'avez pas besoin d'utiliser de calivrass ni de point-virgule. Il n'est pas nécessaire d'utiliser un point-virgule après une propriété. C'est assez similaire au langage de programmation Python. Mais pour ce tutoriel, je vais utiliser la syntaxe SCSS, celle-ci Sinon, cela risque de vous embrouiller. Maintenant, parlons du type de connaissances dont vous avez besoin pour démarrer avec nous. Pour le CAS, vous devez avoir des connaissances de base STML et vous devez avoir une bonne connaissance du CSS Comme je vous l'ai dit plus tôt, en fin de compte, le fichier CS est compilé dans un fichier CSS. Vous devez donc connaître la syntaxe CSS appropriée. Et si je parle de codditor, vous pouvez utiliser n'importe quel Pour ce tutoriel, je vais utiliser le code VS. Vous pouvez utiliser n'importe quel éditeur de code. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, je vais parler de ce qu'est compilateur CAS et du compilateur que nous allons utiliser pour ce didacticiel. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 3. Téléchargez et installez le compilateur sass: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre ce qu'est compilateur SAS et comment télécharger le compilateur SAS, qui peut nous aider à compiler notre fichier CS dans un fichier CSS. Comme vous pouvez le voir dans mon navigateur, j'ouvre le site officiel de SAS, SAS hyphen lang.com Comme vous pouvez le constater, il fournit une introduction de base à SAS. Si tu as le temps, tu peux le lire. Ensuite, vous pouvez voir ici une option nommée Install. Il suffit de cliquer sur. Ensuite, il est redirigé vers cette page. Si vous faites défiler l'écran un peu vers le bas, vous pouvez voir ici une autre méthode. Vous pouvez voir ici une liste de compilateurs, et ici vous pouvez voir une autre méthode installer votre SAS à l'aide de NPM Pour ce tutoriel, je n' utiliserai aucun package de nœud. J'aimerais utiliser un compilateur, et je vais utiliser un autre compilateur, pas celui-ci, et le nom de notre compilateur est Koala Comme vous pouvez le constater, ce sont la plupart des compilateurs payants. C'est pourquoi je vais utiliser un compilateur gratuit, Koala Il vous suffit de rechercher le compilateur Koala SS dans votre navigateur, puis de cliquer sur ce lien, qualaapp.com Ceci est le site officiel de ce compilateur. Comme vous pouvez le constater, Koala est une application graphique pour SAS Compass et CoffeeScript Nous l'utilisons à des fins de compilation pour ces langages, et vous savez que ce sont tous des langages de préprocesseur En gros, en utilisant cette application, nous pouvons compiler toutes ces langues. Dans un premier temps, nous devons télécharger cette application. Pour le téléchargement, vous devez cliquer sur ce bouton vert, Télécharger. Comme vous pouvez le constater, notre téléchargement a déjà commencé. Ensuite, vous devez ouvrir votre dossier de téléchargement, et ici vous pouvez voir la configuration de cette application, Koala setup Je vais maintenant installer cette application sur mon ordinateur. Le processus d'installation est très simple, vous devez double-cliquer dessus. Après cela, vous devez cliquer sur Suivant, puis vous pouvez choisir répertoire dans lequel vous souhaitez l'installer. Il s'agit de l'emplacement par défaut, il suffit de cliquer sur Suivant. Comme vous pouvez le constater, j'ai déjà installé cette application Je ne souhaite donc pas la réinstaller, mais vous devez terminer le processus d'installation. peut prendre deux ou trois minutes Le processus d' installation peut prendre deux ou trois minutes , et une fois le processus d'installation terminé, il s'ouvre automatiquement. Pour l'instant, je vais l'annuler. Donc, une fois le processus d'installation terminé, vous devez cliquer sur l'icône Koala pour l'ouvrir Il suffit de double-cliquer dessus. Comme vous pouvez le constater, la première fois est totalement vide. Et à partir de là, vous pouvez ajouter n'importe quel fichier SAS ou un fichier IS. Dans un premier temps, je vais me lancer dans mon éditeur et créer un fichier CS. Comme vous pouvez le voir, il existe un dossier Nam Demo, et à l'intérieur de ce dossier Devo, il y a un autre dossier Nam CSS Et dans ce dossier CSS, je vais créer un fichier CS. Créons un nouveau fichier dans ce dossier. Point de style SCSS. Sinon, vous pouvez également utiliser la syntaxe SASS. Mais comme je vous l'ai dit plus tôt, pour ce tutoriel, je vais utiliser la syntaxe SSS. Vous pouvez également voir l'icône SAS à cet endroit. Ajoutons maintenant du code SAS dans ce document. J'ai déjà copié du code SAS et je vais le coller ici. Ce code est destiné à une démonstration, vous n'avez donc pas besoin de le comprendre. Dans la prochaine vidéo, je vais en parler. Comme vous pouvez le constater, nous avons créé notre fichier CS avec succès. Maintenant, nous devons créer un fichier CSS dans le même dossier avec le même nom. Je vais créer un fichier CSS dans ce dossier, style point CSS. C'est ça. Et nous devons garder ce fichier vide. Nous n'avons pas besoin de taper de code CSS dans ce fichier. Nous devons le laisser vide, et maintenant nous devons ouvrir notre KoalaOptare Je vais ouvrir notre KoalaOptare. Comme vous pouvez le voir, j'ouvre côte à côte mon Qarafopter et mon répertoire de travail actuel Et ici, vous pouvez voir deux fichiers différents sous forme de fichier et un fichier CSS. Et maintenant, nous devons déplacer ce dossier CSS dans cette application. Je vais juste faire glisser ce dossier et le placer ici. C'est ça. Ici, vous pouvez le voir apparaître automatiquement dans tous les fichiers CSS et CS. Je vais maintenant retourner dans notre éditeur de code et apporter quelques modifications à notre fichier CS. Ici, vous pouvez voir dans mon éditeur que j'ouvre mon fichier CS. Avec cela, j' ouvre également mon fichier CSS. Si je vous montre mon fichier CSS, comme vous pouvez le voir, il est maintenant totalement vide. Maintenant, je vais revenir au fichier CS et je vais définir ce fichier, contrôler. Donc, si je définis ce fichier et que je vous montre mon fichier CSS, vous pouvez voir ici le code CSS approprié. Cette application Kana compile donc le code SAS et le convertit en code CSS Ici, vous pouvez voir qu'avec la balise Nap, elle sélectionne UltaGo, mais dans notre fichier CS, à l'intérieur de la balise Nap, nous utilisons la balise UL Comme vous pouvez le voir dans notre fichier CS, nous utilisons Napkword une fois Mais si je vous montre un fichier CSS, vous pouvez voir ici qu'il a utilisé la balise Nap trois fois avec la balise UL avec la balise LI avec la balise ANCA. Apportons maintenant quelques modifications à notre fichier CS et voyons ce qui s'est passé. Ici, je veux augmenter UL Paddy de 20 pixels, type Summer, 20 pixels Si je définis ce fichier et que je vous montre mon fichier CSS, vous pouvez voir ici que nos modifications sont correctement reflétées dans le fichier CSS. Vous devez juste vous rappeler que vous n'avez rien à changer dans votre fichier CSS. La meilleure option est de fermer votre fichier CSS, puis de travailler avec le fichier CS. J'espère que vous comprenez maintenant comment fonctionnent les compilateurs CS Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 4. Tutoriel sur les variables Sass: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre les variables SAS. Mais dans un premier temps, essayons de comprendre ce que sont les variables et pourquoi nous devrions les utiliser. Ici, vous pouvez voir que nous créons un sélecteur de body tag. Dans ce sélecteur, nous définissons la couleur d'arrière-plan, rouge et l'antenne de la famille de polices Sur ce, je vais prendre deux autres sélecteurs H, un sélecteur et un Spenselector Maintenant, si vous remarquez, vous pouvez voir qu'il y a une chose commune. Ce sont des couleurs, de couleur rouge. Pour le corps, j'utilise une couleur de fond rouge, et pour chaque balise, j'utilise une couleur de police rouge, et j'utilise également la même couleur pour la balise span. Comme vous pouvez le constater, le rouge est la couleur courante. Supposons que nous ayons utilisé la même couleur à dix endroits. Et maintenant, nous devons changer de couleur. Ensuite, il faut aller à dix endroits pour changer de couleur, et cela prend beaucoup de temps. Pour cela, sus introduit des variables. Dans les variables, nous prenons le nom d'une valeur. Dans notre cas, couleur rouge, et le nom de notre variable est la couleur principale du tiret. Et vous devez vous rappeler que pour le nom de la variable, vous devez utiliser le signe du dollar. Au début, nous devons prendre un nom de variable, puis nous devons stocker la valeur dans cette variable. Ensuite, nous devons appuyer sur le nom de la couleur par le nom de cette variable Le principal avantage de l'utilisation de la variable est lorsque nous devons changer la couleur primaire. Supposons que je veuille changer la couleur primaire rouge en bleu. Ensuite, nous devons simplement modifier les variables, pas tous les sélecteurs Nous n'avons pas besoin de taper le nom de la couleur bleue sur les lieux. Il vous suffit d'apporter des modifications à la variable. Cette fonctionnalité est également introduite dans le CSS, mais les anciens navigateurs ne la supportent pas . Mais SAS le pourrait. Sans perdre votre temps, commençons par l'aspect pratique et voyons comment fonctionnent les variables dans SAS. Ici, vous pouvez voir côte à côte, j'ouvre mon Visual Studio Ceaor et mon navigateur et vous pouvez déjà voir que je crée une mise en page Web de base Ici, vous pouvez voir l' en-tête, un fumier, une barre latérale, ainsi que la partie contenu et un pied Si vous remarquez, vous pouvez voir qu'il existe une couleur commune dans en-tête et le pied de page de cette page Web Si je survole ces liens, vous pouvez voir le fond de cette balise d'ancrage de la même couleur fond de cette balise d'ancrage de la De plus, si je passe le curseur sur mes accessoires, vous pouvez voir la même couleur marron De plus, si je sélectionne tout le contenu, vous pouvez voir la même couleur d'arrière-plan derrière le contenu. Je vais maintenant vous montrer comment utiliser les variables. Donc, comme vous pouvez le voir, notre couleur primaire est le marron, nous devons donc trouver la couleur marron. Ici vous pouvez voir le nom de la couleur marron. Nous utilisons cette couleur dans le survol d'ancre, section d'en-tête, la section de pied de page, en grande partie Maintenant, je veux remplacer cette valeur de couleur par le membre variable. Pour cela, nous devons créer une variable. Donc ici, je vais créer une variable. Au début, nous devons utiliser le signe du dollar, dollar et notre membre variable est la couleur principale. Couleur minimale. Je vais utiliser la couleur marron. Je vais maintenant remplacer le nom des couleurs par nom de la variable, couleur principale. Donc, je vais d'abord remplacer le sélecteur, la couleur ou le nom de variable d'Anchor Hover dans la barre supérieure couleur ou le nom de variable Je vais également le remplacer dans le sélecteur d'en-tête, couleur principale Ensuite, dans notre élément de liste de menu. Ensuite, je souhaite le remplacer dans notre section de contenu. Et je vais aussi le remplacer dans notre barre latérale. Ensuite, je vais le remplacer dans notre section de pied de page. C'est donc chose faite. Si je configure ce fichier et que je recharge mon navigateur, vous pouvez voir qu'il n'y a aucun changement Vous pouvez voir la même couleur d'en-tête, la même couleur de pied de page, et si j'utilise mon mignon dans les liens de mon menu, vous pouvez voir la couleur et si j'utilise mon mignon dans les liens de mon menu, d'arrière-plan. Il est également brun. J'ai réussi à remplacer notre valeur de couleur par une variable. Maintenant, je veux changer la couleur principale de ce site, du marron au bleu. Lorsque je barre mon curseur dans les éléments de menu, je veux une couleur bleu-brun. En gros, je veux dire que je veux changer la couleur principale, du brun au bleu. Je vais taper des cheveux bleus. Si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Vous pouvez également voir la couleur bleue dans la section d'en-tête, la section pied de page, la section de menu et la section de la barre latérale Maintenant, nous n'avons pas besoin de changer la couleur plusieurs fois car nous utilisons maintenant une variable. Maintenant, vous pouvez mettre n'importe quelle couleur pour une seule fois, et cela reflétera toutes les pages. C'est l'avantage de l'utilisation de variables. Il vous suffit d'utiliser le nom de la variable comme valeur. Maintenant, si je vous montre mon fichier CSS, vous pouvez voir ici qu'il n' y a pas de variables. Vous pouvez juste voir les noms des couleurs, fond bleu. Il ne s'agit pas seulement de travailler avec les couleurs. Vous pouvez mettre n'importe quel type de valeur dans une variable. Supposons que je veuille changer le style de police sur toute la page Web. Dans ce cas, nous pouvons utiliser une variable. Je vais créer une autre variable, et le nom de notre variable est main font, Dollar, main font. Colon. Pour l'instant, je vais utiliser aerial et maintenant je vais remplacer toutes les valeurs de police par cette variable. Je vais remplacer la police aérienne par cette variable, la police principale. Et nous devons également remplacer dans le sélecteur d'en-tête la police principale Enfin, je vais le remplacer dans notre en-tête de contenu. Police minimale. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il n'y a aucun changement. Cela a parfaitement fonctionné. Vous pouvez le voir imprimer une vraie police sur toute la page Web. Maintenant, si nous devons modifier la famille de polices, nous devons la modifier plusieurs fois. Maintenant, changeons la famille de polices sur l'ensemble de la page Web, et je vais utiliser autre chose qu'une police. Si je configure ce fichier et que je recharge mon navigateur, vous pouvez voir le style de police Comme vous pouvez le constater, il remplace la police Areal par VardanaFont. Maintenant, c'est clair pour vous, à quoi sert une variable dans sas ? Cela nous permet non seulement de gagner du temps, mais également d'améliorer notre productivité. Nous pouvons changer des milliers de lieux en changeant un seul endroit. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 5. Tutoriel d'imbrication de SAS: Bonjour, les gars. Bon retour. Encore une fois, je suis de retour avec un nouveau tutoriel sur le SAS et dans ce tutoriel, nous allons apprendre le SAS Nesting. Vous pouvez voir ici trois sélecteurs différents. Comme vous pouvez le voir dans notre premier sélecteur, j'utilise un tag Nap avec un tag UL, et dans notre second sélecteur, j'utilise un tag Nap avec un tag Ali, et dans notre dernier sélecteur, et dans notre dernier sélecteur, nous utilisons un tag Nap avec un tag Quel est le point commun entre les trois ? C'est quoi Nap tag. Comme vous pouvez le voir, si nous utilisons la syntaxe SS, nous devons utiliser le tag Nap trois fois. Mais si nous tapons le même code dans SAS, nous devons taper comme ceci et nous appelons cette méthode d'imbrication. Ici, vous pouvez voir qu'au début, nous lançons le tag Nap, puis dans le Caliss, nous personnalisons tous ces sélecteurs Vous allez sélectionner notre sélecteur d'ancrage Ali Selector. Si nous utilisons la nidification, nous n'avons pas besoin de taper le mot clé dep trois fois et dans le Liverss nous devons sélectionner tous les autres sélecteurs Ce qui est lié au naptag. Mais lorsque je définis le fichier CS, il renvoie ce type de code CSS. Cela va réduire une partie du code de programmation, mais cela donnera le même résultat. Enfin, sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Vous pouvez donc voir ici côte à côte que j'ouvre mon créateur de vis visuel et mon navigateur et que je crée déjà une mise en page Web de base. Et dans mon studio visuel Cdiator, vous pouvez voir iPent 35, notre document d'estimation, notre fichier CSS et notre fichier CSS Vous savez, j'utilise cette mise en page dans notre précédent tutoriel, vous pouvez voir les variables que j'ai créées dans notre précédent tutoriel. Mais dans ce contrat de studio, nous allons apprendre comment utiliser la nidification. Mais dans un premier temps, nous devons trouver la position où nous pouvons utiliser la nidification. Je vais faire défiler la page un peu vers le bas. Ici, vous pouvez voir le sélecteur Br supérieur. Comme vous pouvez le constater, après le sélecteur de Br supérieur, nous utilisons la barre supérieure avec UL, UL Li, étiquette d'ancrage et Hover C'est la bonne méthode d'imbrication. Dans un premier temps, je vais copier le CSS UL. Copiez, puis je vais le coller dans le sélecteur Tobar car tobr est la balise courante Maintenant, ce sélecteur n' est plus nécessaire, je vais donc le supprimer Ensuite, vous pouvez voir à l'intérieur de l'étiquette UL qu'il y a une étiquette LI. Comme vous pouvez le constater, j'utilise déjà le tag UL dans la barre supérieure. Maintenant, je vais copier uniquement le sélecteur d'IA de cette position vers cette position Copie. Je vais le coller dans le tag UL. Au début, notre sélecteur tobr et à l'intérieur du sélecteur tobr, je place le sélecteur UL, puis dans le sélecteur UL, je place le sélecteur AI. Maintenant, je n'ai plus besoin de ce sélecteur de thèse, je vais donc le supprimer Et maintenant, vous pouvez voir qu'à l'intérieur du sélecteur Tobar, nous avons une balise d'ancrage Maintenant, je vais copier uniquement le sélecteur de balise d' ancrage, et je vais le coller en dehors de la balise UL Je vais supprimer ce code. Je n'en ai pas besoin maintenant. Vous pouvez maintenant voir un sélecteur Hobart C'est un sélecteur Hober d'ancrage, pas le sélecteur TBarhber pas le sélecteur TBarhber Je vais copier ce sélecteur Hobart, et je vais l'utiliser le tag nga dans et je vais l'utiliser dans le tag nga dans cette position. Je vais supprimer celui-ci. Et maintenant je voudrais vous dire une chose nouvelle. Comme vous pouvez le voir, à l'intérieur de la balise d'ancrage, nous créons la balise Anchor Hobert Il n'est donc pas nécessaire d'utiliser à nouveau la balise d'ancrage pour pouvoir supprimer la balise Anca. Ici, nous pouvons utiliser le signe de la personne, quelque chose comme ça. Cela signifie que nous utilisons cet effet Her avec le tag parent. Cela va créer le tag Her de son tag parent. Si je configure ce fichier et actualise mon navigateur, vous pouvez voir ici qu'il n' y a aucun changement. C'est le travail tel qu'il est. Nous appelons cette méthode la nidification. De même, nous allons suivre le même processus pour la section d'en-tête. Je vais copier le tag H one et le coller dans le tag à en-tête. Je vais supprimer celui-ci. Comme je vais suivre le même processus pour la section du menu. Au début, je vais copier la partie UL de ce menu et la coller dans la section du menu, je vais supprimer l'ancienne. Ensuite, je vais copier la partie AI de ce menu et je vais la coller dans la section du menu. Ensuite, je vais retirer celui-ci. Notre prochain choix est le sélecteur d'ancrage, qui se trouve à l'intérieur du sélecteur LI Je vais donc copier la balise d'ancrage, et je vais la coller dans la balise LI. Ensuite, je vais retirer celui-ci. Et notre prochaine sélection est le tag Anchor Hobart. Je vais donc copier ce sélecteur. Comme vous pouvez le voir, c'est la balise Hobart d'ancrage, nous devons donc la coller à l' intérieur de la balise d'ancrage Ensuite, nous devons retirer l'étiquette aérienne, et nous pouvons utiliser une personne ici. Pour l'instant, celui-ci ne sert à rien, je veux donc le supprimer. Donc, en gros, il s'agit de créer notre code CSS très gérable. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il n'y a aucun changement Et maintenant, nous n'avons plus besoin d'utiliser ce sélecteur de menu plusieurs fois. Ensuite, je vais suivre le processus d' imbrication de notre section de contenu Donc, dans un premier temps, je vais copier le sélecteur s two. Ensuite, je vais le coller dans la section du contenu, je vais supprimer celui-ci. Ensuite, vous pouvez voir un pseudosélecteur nommé selection. Vous pouvez voir que nous utilisons cette sélection dans toute la section du contenu, je vais copier uniquement le pseudo sélecteur Je vais le coller dans la section de contenu, pas dans la section ST. Ensuite, je vais le retirer. Comme vous le savez, pour le pseudo sélecteur, nous devons utiliser le signe de la personne, donc je vais taper person ici Si j'enregistre ce fichier et que je recharge mon navigateur, vous verrez qu'il n'y a aucun changement J'espère que vous comprenez maintenant ce qu'est nidification et comment nous pouvons l'utiliser Merci d'avoir regardé cette vidéo. Restez à l'affût de notre prochain studio. 6. Tutoriel des partiels Sass et des importations: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre ce qui est partiel et ce qui est importé. Donc, dans un premier temps, concentrons-nous sur le partiel. Partiel signifie parties. Je tiens à dire que certaines parties de SS vont bien. Supposons que nous ayons un fichier CS et notre fichier soit un fichier CS à points principaux, et qu'il s'agisse de notre fichier principal. Et comme vous le savez, si nous créons un site Web, notre site Web divisé par en-tête, contenu, accessoires et pieds de page, nous devons parfois créer différents modèles pour différentes pages Mais le problème, c'est que lorsque nous tapons tout le code dans un seul fichier ? Cela rend notre fichier très lourd et désordonné. Nous devons faire défiler notre page plusieurs fois vers le haut et vers le bas. Donc, pour résoudre ce problème, nous séparons notre mise en page. Pour l'en-tête, nous créons un fichier d'en-tête pour le contenu, nous créons un fichier différent pour la barre latérale et pour le pied Si nous travaillons avec des variables, nous créons également un autre fichier pour les variables. En gros, il s'agit d'organiser notre code et de réduire la maladresse Supposons que nous complétions le style de la section d' en-tête, puis que nous devions l'ouvrir à nouveau. Nous pouvons ouvrir la pièce spécifiée. Pourquoi devons-nous changer ? C'est le concept de partiel. Parlons maintenant des importations. Après avoir créé les différentes parties, nous devons les saisir dans notre fichier principal. Pour cela, nous devons utiliser un mot clé spécial, input. Lors de la saisie du débit, nous devons taper l'en-tête du nom du fichier. Il y a une chose importante dont tu dois te souvenir. Vous devez créer ce même fichier d'extension. Je veux dire fichier CS, pas fichier CSS. Vous ne pouvez pas saisir de fichier CSS dans le fichier principal. De toute évidence, vous devez créer un fichier CS. Et une autre chose dont vous devez souvenir lorsque vous créez votre fichier séparé, vous devez d'abord utiliser undersco. Je veux dire underscohader point SCSS. Notre signe de soulignement reconnaît qu'il ne s' agit pas du fichier principal Notre compilateur CS a donc réussi à identifier qu'il s'agit d'un fichier partiel et d'un fichier partiel et que nous devons l'inclure dans notre fichier principal C'est pourquoi nous n'avons pas besoin d'un fichier CSS distinct pour les fichiers partiels. Si vous utilisez la syntaxe SASS, votre fichier partiel vous devez également utiliser la syntaxe SASS pour Donc, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons utiliser les partiels et les entrées. Comme vous pouvez le voir, j' ouvre déjà mon application KOA, et j'ouvre notre dossier CSS dans cette application Avec cela, j'ouvre également l'éditeur de code Visual Studio. Comme vous pouvez le voir, il s'agit de notre Min CSF, style point Sss. Et maintenant je vais diviser ce fichier avec pas. Dans un premier temps, je vais commencer par ces variables. Je souhaite créer un fichier CS distinct pour nos variables. Dans un premier temps, je vais créer un nouveau fichier dans notre dossier CSS. Et le nom de notre fichier est variables. Comme je vous l'ai dit plus tôt, pour créer un fichier partiel, nous devons utiliser des variables undersco soulignées. Point, notre extension est C is is, puis je vais appuyer sur Entrée. Comme vous pouvez le voir, cela a détruit notre fichier, puis je vais supprimer mes variables de ce fichier, et je vais les coller dans le fichier de variables Et je vais le supprimer de notre fichier principal. Donc, je vais d'abord enregistrer ce fichier. Ensuite, nous devons inclure ce fichier dans notre fichier de style. Pour cela, nous devons d'abord taper sur le signe rouge, puis nous devons taper Importer. Importez à l'intérieur des codes doubles. Nous devons taper le nom du fichier, mais nous n'avons pas besoin d' utiliser UnderscoSign, nous devons taper des variables Il n'est pas nécessaire de mentionner l'extension du fichier. Notre compilateur est suffisamment intelligent pour comprendre l'extension du fichier, puis vous devez utiliser un point-virgule pour terminer cette ligne Ensuite, je vais créer un nouveau fichier pour notre section d'en-tête. Je vais donc taper l'en-tête undersco. Dans ce cas, je vais appuyer sur Entrée. Comme vous pouvez le voir, cela a créé un nouveau fichier, et maintenant je veux séparer notre section d'en-tête. Pour cela, je vais sélectionner dans la barre supérieure. section de la barre supérieure, je souhaite copier notre en-tête, ainsi que le menu. Je vais le couper et coller dans le fichier d'en-tête. C'est ça. Pour notre partie d'en-tête, nous sélectionnons la section d'en-tête Tobb, également la section de menu Ensuite, nous devons importer le fichier dans notre fichier principal, qui est de style point Sss. Je vais taper en rouge, Importer puis dans le double cours, nous devons taper le nom du fichier, qui est l'en-tête, puis le point-virgule deux dans cette ligne Maintenant, pour notre section de contenu, je vais créer un autre fichier. Dans le dossier CSS, je vais créer du contenu Undersco SCS, puis appuyer sur Entrée Comme vous pouvez le constater, il crée un nouveau fichier. Ensuite, je reviens à mon fichier de style SSS, et je vais couper cette partie du contenu Et je vais le coller dans le fichier SCSS à points de contenu Je vais également définir ce fichier. la même manière, nous devons saisir ce fichier dans notre fichier principal. Je vais donc dupliquer cette ligne et ici je vais taper contain. Ensuite, nous devons créer un fichier pour notre section Side Wars. Je vais créer un nouveau fichier dans notre dossier CSS. Soulignez la barre latérale Sass . Comme vous pouvez le voir, nous créons un nouveau fichier pour notre barre latérale, puis nous devons couper la section latérale du fichier de style CSS Je vais couper cette section latérale de ce fichier. Et je vais le coller dans ce fichier Sidewd. Ensuite, je vais configurer ce fichier. Nous devons maintenant saisir ce fichier dans notre fichier de style. Je vais commencer cette ligne, et là je vais enfin taper sidebard, je vais créer un nouveau fichier pour notre section de pied Donc, dans ce dossier***, encore une fois, je vais créer un nouveau fichier, UnderScoefter, Dans ce fichier, je souhaite styliser notre partie de pied de page. Je vais couper cette partie, je la colle dans la section du pied de page Ensuite, je vais configurer ce fichier. Alors que je vais revenir à notre fichier principal, un fichier CS stylisé. Je dois maintenant saisir la section de pied de page dans notre fichier principal. Donc, dupliquez cette ligne et ici je vais taper le pied de page. Je vais configurer ce fichier. Enfin, vous pouvez voir la section des requêtes multimédia. Nous l'utilisons à des fins réactives. Si vous souhaitez séparer cette partie, oui, vous le pouvez. Créons un autre fichier pour la section des requêtes multimédia. Dans ce dossier***, je vais créer un autre dossier. Je vais créer un fichier undersco media. Dot SCs puis je vais appuyer sur Entrée. Ensuite, je vais couper la section des requêtes multimédia et je vais la coller dans ce fichier multimédia. Je vais régler celui-ci. Comme vous le savez, nous devons saisir ce fichier dans notre fichier principal. Je vais dupliquer cette ligne ici. Je vais taper notre ligne fine, qui est média. Et je vais appuyer sur Ctrl S pour configurer ce fichier. En utilisant une technique partielle, nous avons réussi à séparer notre mise en page Web. Nous séparons notre section d'en-tête, section de contenu, notre section de barre latérale, section de pied de page, ainsi que les requêtes multimédia et les variables C'est la maladresse de notre site web. Si j'ouvre mon fichier SML, laissez-moi vous le montrer. Comme vous pouvez le constater, il s' agit de notre mise en page TML. Rechargeons le fichier. Comme vous pouvez le constater, il n'y a aucun changement. C'est L tel qu'il est. Supposons maintenant que vous souhaitiez modifier la couleur d'arrière-plan de l'en-tête et du pied Dans ce cas, vous devez ouvrir le fichier de variables. Et à partir de là, vous pouvez changer votre couleur principale. Je veux du vert, quelque chose comme ça. Si je place cette pile, puis que je retourne dans le navigateur et que je recharge mon navigateur, vous pouvez voir le résultat ici Cela a changé notre couleur principale. Si je vous montre mon fichier CSS, laissez-moi vous montrer le style point CSS. Ici, vous pouvez le voir suivre la séquence de nos fichiers d'entrée. D'abord, Tpbard, puis l'en-tête, puis le contenu, puis le pied de page de l'Atlas dans la barre latérale, puis notre requête multimédia Après une requête médiatique, comme vous pouvez le voir, notre corps a été sélectionné et notre rappeur sélectionné. Si je vous montre le fichier de style SAS, vous pouvez suivre la séquence. Tout d'abord, l'en-tête de nos variables contient la requête multimédia du pied de page de la barre latérale et, comme vous pouvez le voir, notre section corps et notre section rappeur J'espère que vous comprenez maintenant ce qui est partiel et ce qui importe. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 7. Tutoriel Sass Mixins: Bonjour, les gars, c'est bon de vous revoir. Dans ce tutoriel, nous allons découvrir une nouvelle fonctionnalité Vlated SAS Dans ce tutoriel, nous allons apprendre que les renards sont une fonctionnalité très utile Supposons que nous ayons deux classes différentes, la classe 1 et la classe 2. Comme vous pouvez le voir, j'utilise propriété botter radius dans les deux classes Pour la première classe, j'utilise un rayon de bordure de cinq pixels, et pour la classe deux, j'utilise un rayon de bordure de dix pixels Vous pouvez donc voir que j'utilise des propriétés similaires dans les deux classes. Leurs propriétés sont les mêmes, mais leur valeur est différente. Pour notre ancien navigateur Chrome, nous utilisons Ber radius avec webkit, et pour nos anciens navigateurs Mozilla , nous utilisons Boerradius Il s'agit donc d'une méthode CSS simple. Mais le problème est que si nous devons utiliser les mêmes propriétés dix fois, alors quoi ? Ensuite, nous devons taper 30 lignes de code. Pour résoudre ce problème, nous introduisons des mélanges. Les mixages fonctionnent essentiellement comme des fonctions. Si vous connaissiez JavaScript, vous connaissez déjà les fonctions. Permettez-moi de clarifier ce concept. Je vais vous montrer un exemple. Si vous souhaitez créer un mixage dans SAS, vous devez d'abord taper add mixins, puis prendre le nom du mix Tu peux prendre n'importe quel nom. Dans notre cas, BD radius. N'oubliez pas de ne pas laisser d' espace dans ce nom, puis vous devrez participer à des courses rondes ce qui est totalement facultatif. Si vous souhaitez prendre un paramètre, vous devez transmettre le nom de la variable. Comme vous pouvez le voir, dans notre cas, valeur, nous devons utiliser ces trois propriétés dans ce mélange. Vous pouvez également transmettre le paramètre avec cette propriété. De cette façon, nous pouvons créer notre fonction de mixage. Maintenant, la question est de savoir comment utiliser cette fonction de mixage dans notre code CSS ? Laisse-moi te montrer. Pour cela, je vais utiliser la première classe. Si je veux utiliser ce mixage, nous devons taper au taux include, puis notre nom de mixage border radius. Entre parenthèses, nous devons transmettre la valeur du rayon de bordure comme une fonction similaire Lorsque j'appelle cette fonction de mélange, nous devons passer une valeur en tant que paramètre, puis nous pouvons utiliser ce paramètre comme valeur, valeur pour trois propriétés différentes. Sans perdre votre temps, commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser les mixins Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Corretor et mon navigateur et je crée déjà un nouveau document DML Et ici, vous pouvez voir dans mon navigateur que nous avons déjà créé trois div différents pour cet exemple, et nous avons également défini trois identifiants différents pour ces trois div. Pour notre premier dif, nous avons réglé en premier. Pour le second, nous mettons le deuxième, et pour le dernier si nous définissons le troisième, et je lie également notre fichier CSS à ce document. Passons donc au fichier CS et essayons d' explorer le fonctionnement du mixage. Dans un premier temps, je veux définir idées de bordure pour ces trois D. Pour cela, je vais utiliser la méthode de mixage. Créons un mixage. Ajoutez le taux de mélange. Ensuite, après avoir mixé Qard, nous devons prendre le nom du mixage et notre nom de mixage est BD radius Ensuite, nous devons utiliser des parenthèses pour nos paramètres. C'est assez similaire à la fonction JavaScript. Ensuite, dans le Kaliss, je vais définir notre première propriété et le nom de notre première propriété est Dash Web Keith Ber Pour l'instant, je vais définir le rayon de la barre par pixel, et je vais dupliquer cette ligne pour taper. Au début, j'utilise le préfixe pour notre ancien navigateur Crone, puis je vais utiliser le préfixe pour le navigateur Mozilla, donc je vais Enfin, je vais utiliser le rayon exact des limites de la propriété. Notre mélange est maintenant prêt à être utilisé. N'oubliez pas que nous n' utilisons aucun paramètre dans cette fonction de mixage car pour l'instant, je ne souhaite pas passer de valeur en paramètre. Dans un premier temps, je vais utiliser cette fonction de mixage lors de notre premier clic. Pour cela, nous devons d'abord taper Include Keyword au taux d'inclusion. Après le mot clé Include, nous devons taper le nom du mixage, et notre nom de mixage est VD radius. Puis entre parenthèses et subagins pour terminer cette ligne. N'oubliez pas que si vous souhaitez appeler ce mixage en fonction, vous devez toujours utiliser le mot clé add the red include. Maintenant, si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Vous pouvez voir le rayon de la frontière lors de notre premier saut. Et maintenant, je vais appeler la même fonction de mixage dans notre deuxième et notre troisième profondeur. Si je configure ce fichier et que je réécris mon navigateur, vous pouvez voir le même résultat, toutes ces trois profondeurs Maintenant, je veux trois radios frontalières différentes pour ces trois profondeurs et maintenant je veux trois radios frontalières différentes pour ces trois profondeurs Supposons que pour notre premier AF, je veuille un rayon de bordure de cinq pixels. Pour notre deuxième sourd, je veux un rayon de boer de dix pixels, et pour notre troisième, je veux un rayon de bordure de 15 pixels Dans ce cas, nous devons utiliser le paramètre dans notre fonction de mixage. Nous devons définir un nom de variable en tant que paramètre. Pour cela, nous devons utiliser le signe dollar, dollar et le nom de notre variable est valeur. Ensuite, je vais copier cette valeur, et je vais l'utiliser comme valeur de propriété. Quelque chose comme ça. Nous devons maintenant transmettre la valeur lorsque nous appelons la fonction de mixage. Pour le premier, je vais dire cinq pixels. De même, pour notre deuxième DVD, je souhaite utiliser un rayon de boer de dix pixels, dix Et pour notre dernier DVD, je souhaite utiliser un rayon de bordure de 15 pixels. Si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Comme vous pouvez le constater, nous avons configuré avec succès trois radios frontalières différentes pour ces trois actes. C'est le cas d'utilisation de la fonction de mixage dans SAS. J'espère que c'est clair pour toi maintenant. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain studio. 8. Tutoriel Sass Extend: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié à SAS. Et dans ce tutoriel, vous allez apprendre une fonctionnalité très utile, à savoir l'étendue. Supposons que nous ayons une classe nommée class one, et comme vous pouvez le voir, nous utilisons quatre propriétés dans cette classe, la couleur, la taille de police, le rembourrage et la hauteur de ligne Avec cela, nous avons une autre classe, et notre nom de classe est classe deux. Comme vous pouvez le voir, dans notre première classe, nous utilisons la couleur rouge, et dans notre classe deux, nous utilisons la couleur orange. Ici, vous pouvez voir que sans propriété de couleur, toutes les propriétés et leur valeur sont identiques. Leur taille de police, leur rembourrage et leur peluche . Tout est pareil. Supposons maintenant que nous ayons une autre classe, la classe trois. De même, sans couleur, toutes les propriétés sont identiques, leur taille de police, leur rembourrage et leur hauteur de ligne Nous répétons donc leur probité et leur valeur dans le temps. Je tiens à dire que nous devons taper six lignes supplémentaires pour cela. Donc, pour gérer ce genre de situation, CS a introduit une nouvelle méthode, qui existe déjà. Pourquoi devons-nous travailler avec le fichier CS au début, nous devons créer plus un tel quel. Mais lorsque nous créons notre classe deux, nous devons d'abord remplacer la propriété de couleur car je ne veux pas répéter cette couleur rouge pour ce DV C'est pourquoi j'utilise cette couleur. Ensuite, vous devez utiliser le mot clé extend, à l'extension rouge, et je souhaite étendre cette classe avec la propriété class one. C'est pourquoi je tape classe 1. Vous pouvez étendre avec un identifiant de classe, comme vous le souhaitez. De même, pour notre troisième classe, il suffit de remplacer la couleur verte, puis suivre le même processus Ajoutez l'extension rouge ou la classe 1. Cela signifie que je veux utiliser une propriété de classe un dans la classe trois. Donc, sans perdre votre temps, commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser la méthode d'extension. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visual Studio et mon navigateur en utilisant l'extension de serveur IF, et j'ouvre également notre application Koala Comme vous pouvez le constater, nous devons distinguer trois profondeurs différentes avec leur couleur de fond différente et leur taille différente. Pour ces trois Deep, nous utilisons trois identifiants différents, le premier, le deuxième et le troisième. Il s'agit de notre fichier CSS, style point CSS. Si je vous montre mon fichier CSS, vous pouvez voir ici, lors de notre premier plongeon, notre couleur de fond est le gris et avec cela 300 pixels. De même, pour notre deuxième immersion, nous utilisons un fond de couleur orange et de 400 pixels. Et pour notre troisième plongée, nous utilisons la couleur de fond rouge et 600 pixels. Sans ces deux propriétés, toutes les propriétés et leurs variantes sont identiques. Vous pouvez le remarquer : 15 pixels , rayon de bordure de 10 pixels, famille de polices aérienne, taille de police 20 pixels Si nous suivons cette méthode normale, nous devons taper huit lignes supplémentaires. Pour résoudre ce type de problème, SAS introduit Extend. Revenons au fichier CS. Nous n'allons rien changer dans notre premier if, mais dans notre second Dave, je vais utiliser la méthode extend. Laisse-moi te montrer. Dans un premier temps, je vais supprimer ces quatre lignes, en ajoutant le rayon de bordure, la famille de polices et les côtés de police Ensuite, je vais utiliser le mot clé, at extend. Et maintenant, je veux étendre ce deuxième identifiant avec le premier identifiant. Ici, nous devons d'abord taper has tag. Puis un point-virgule pour terminer cette ligne. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Cela a parfaitement fonctionné. Ensuite, je vais suivre ce processus similaire pour notre troisième profondeur. Je vais supprimer les propriétés, et je vais étendre vers le rouge, étendre et je veux d'abord étendre notre troisième e avec notre première balise D has. Puis un point-virgule pour terminer cette ligne. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement dans notre navigateur. Nous avons donc réussi à étendre notre premier identifiant. Mais si je vous montre mon fichier CSS, laissez-moi vous montrer comment vous pouvez le voir créer une combinaison de sélecteur d'ID, premier, deuxième et troisième, vous pouvez également voir deux identifiants différents en deuxième et troisième Il est simplement utilisé pour remplacer la couleur d'arrière-plan et la profondeur avec 400 pixels, 600 pixels, fond rouge et arrière-plan orange Comme vous pouvez le constater, c'est très utile. Si vous remarquez, vous pouvez voir que c'est assez similaire avec les mixes, mais il y a une différence entre les mixes et les extend. Quelle est la différence ? La première différence est que nous pouvons transmettre une valeur en tant que paramètre dans les mixins, mais nous ne pouvons pas transmettre la valeur en tant que paramètre dans l'étendue La deuxième différence est que nous pouvons utiliser un sélecteur combiné en extension Mais dans les mixins, nous ne pouvons pas utiliser de sélecteur combiné, et maintenant je vais vous montrer une autre méthode, comment nous pouvons utiliser extend Vous connaissez donc déjà le processus, comment nous pouvons utiliser l'extension. Au début, nous devons créer une classe, puis en utilisant cette classe, nous pouvons étendre cette classe avec une autre classe et vous connaissez le processus. Supposons maintenant que vous décidiez ne pas afficher la classe 1 dans votre fichier CSS, mais d'utiliser leurs propriétés dans les classes deux et trois. Dans ce cas, vous devez utiliser le signe du pourcentage avant le nom de la classe. Désormais, la classe 1 est réutilisable , comme les mix ins. C'est ce que nous appelons le hoolder BathodPlace. Maintenant, l'espace réservé, ne reflétera pas dans votre fichier CSS Si vous souhaitez étendre votre propriété avec cet espace réservé, vous devez utiliser à l'aide l'extension, le signe de pourcentage et le nom de classe Il vous suffit de vous souvenir de l'espace réservé et d'étendre le travail ensemble. Je vais donc vous montrer la démonstration proprement dite. Une fois de plus, je suis de retour chez mon coordinateur de studio visuel. Donc, d'abord, je vais créer un espace réservé, donc je vais supprimer ce hashtag, puis je vais utiliser PercentiSge Nous transformons maintenant notre premier identifiant en un espace réservé, et je vais utiliser cet espace réservé lors de notre deuxième immersion Et si vous souhaitez utiliser un espace réservé avec extend, vous devez utiliser la percentisine Maintenant, notre deuxième div s'étend avec cet espace réservé. Je souhaite également prolonger notre troisième plongeon avec cet espace réservé Je vais utiliser le percentisg ici . Je ne définis pas ce fichier. Si je définis d'abord ce fichier, il détruira ces propriétés profondes car nous transformons notre premier identifiant en un espace réservé Comme je vous l'ai dit plus tôt, notre espace réservé ne se reflétera pas dans notre fichier CSS Si je configure ce fichier, vous pouvez voir le résultat. Tout d'abord, il détruit notre première profondeur, mais il a conservé la propriété précédente pour le deuxième et le troisième plongeon. Si je vous montre mon fichier CSS, vous pouvez voir le résultat ici. Ici, vous pouvez voir que le nom IDF a été sélectionné. Vous ne pouvez voir que deux sélecteurs, l' ID le deuxième et l'ID le troisième abord, il crée une combinaison en utilisant le deuxième identifiant et le troisième identifiant, puis il crée un deuxième sélecteur d'identifiant et un troisième sélecteur d'identifiant pour remplacer la couleur et la largeur de l'arrière-plan En utilisant un espace réservé, nous pouvons créer un code réutilisable, et nous pouvons l'utiliser plusieurs fois. J'espère que vous comprenez maintenant clairement ce que sont l'étendue et l'espace réservé Dans le prochain tutoriel, nous allons apprendre les opérateurs SAS. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 9. Tutoriel des opérateurs Sass: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié au CS, et dans ce didacticiel, nous allons apprendre les opérateurs CS. Ici, vous pouvez voir que nous avons au total cinq opérateurs différents. Notre premier nom d'opérateur est opérateur d'égalité. Viennent ensuite l'opérateur relationnel, l'opérateur numérique, l'opérateur de chaîne et l'opérateur wllian Et dans ce tutoriel, nous allons apprendre l'opérateur d'égalité, l'opérateur relationnel et l'opérateur Wollan Mais dans un premier temps, essayons de comprendre ce que sont les opérateurs du méninguum Dans un premier temps, je vais parler d'opérateur d' égalité et d'opérateur relationnel Comme vous pouvez le voir dans notre opérateur d' égalité, nous avons deux types d'opérateurs, double égal à l'opérateur et non égal à l'opérateur. Dans l'opérateur égal à, nous devons utiliser deux fois le sinus égal. Mais dans l'opérateur not equal to, nous devons d'abord utiliser l'explication sinus, puis nous devons utiliser le sinus égal. C'est méchant, pas égal. En utilisant l'opérateur égal à, nous pouvons comparer les valeurs. Supposons que notre première valeur soit cinq, cinq égale cinq, alors elle renverra vrai car les deux valeurs sont identiques. De même, si j'utilise pas égal à sinus, cela renverra également une valeur vraie ou fausse fonction de la comparaison. Il s'agit de l'utilisation de l'opérateur d'égalité. Nous allons en apprendre davantage à ce sujet dans nos travaux pratiques. D'autre part, nous avons des opérateurs relationnels. Et il est livré avec quatre opérateurs différents. Inférieur à l'opérateur, supérieur à l'opérateur, inférieur à l'opérateur, supérieur à égal à l'opérateur. Tout cet opérateur d'égalité et cet opérateur relationnel utilisent avec la condition IP dans SAS, nous l'appelons fonction I. Dans nos prochains tutoriels, nous allons en apprendre davantage à ce sujet. Dans ce didacticiel, nous allons apprendre, comment pouvons-nous utiliser des conditions avec cela ? Sans perdre votre temps, passons à l'aspect pratique. Ici, vous pouvez voir que j'ai déjà mis mon dossier CSS dans ce compilateur SS Quala, et vous pouvez également voir que j'ouvre notre fichier CS et notre fichier CSS côte à côte, et ici vous pouvez voir un sélecteur de classe, la classe 1 Je vais maintenant commencer par cet opérateur pratique avec l'égalité. Laisse-moi te montrer. Dans un premier temps, je vais prendre une propriété CSS, qui est le padding Rembourrage, dix pixels équivalent à dix pixels. Ici, je vais comparer deux valeurs. Si je définis ce fichier, vous pouvez voir ici dans notre fichier CSS qu'il s'agit d'un rembourrage écrit, c'est vrai Ici, nous faisons correspondre dix pixels à dix pixels Lorsque j'ai défini ce fichier, c'est écrit vrai. Oui. La condition est vraie, mais nous n'utilisons pas cet opérateur de cette façon. Si vous connaissez JavaScript, vous le savez. Si vous connaissez JavaScript, vous connaissez déjà la condition p, et nous allons en apprendre davantage à ce sujet dans nos prochains tutoriels. Ici, je vous explique simplement comment utiliser les opérateurs de comparaison. Ici, vous pouvez voir que nous comparons dix pixels à dix pixels, mais si je change la valeur dix pixels par dix EM, si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'un fichier de remplissage écrit parce que la valeur de dix pixels et la valeur de 10 h 00 ne sont pas sûres. De même, si je compare dix pixels avec 15 pixels, je vais vous montrer que je vais définir ce fichier Il est également écrit faux car 15 pixels sont supérieurs à dix pixels. Mais si j'utilise l'opérateur not equal to, laissez-moi vous le montrer puis définir ce fichier. Dans ce cas, c'est écrit vrai parce que notre condition est vraie. Dix pixels ne sont pas égaux à 15 pixels. Comme vous pouvez le voir, nous comparons ici notre valeur avec une valeur numérique, mais nous pouvons également utiliser une valeur de chaîne. Laisse-moi te montrer. Ici, je vais taper le nom de la police AL Je vais comparer, donc je vais utiliser égal à sinus avec antenne. Si je définis ce fichier, vous pouvez voir ici qu'il est écrit vrai car les deux polices sont vendues. Mais si j'utilise la police Roboto, laissez-moi vous montrer que j'ai configuré ce fichier, maintenant il est écrit faux Non seulement la valeur d'une chaîne, nous pouvons également comparer une valeur complexe. Laisse-moi te montrer. À l'intérieur des lacets, je vais taper quatre pixels, six pixels et deux pixels, je vais copier cette diapositive, et je vais la coller ici Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car les deux valeurs sont vraies. Mais si je change une valeur, sept pixels, puis que je définis ce fichier, vous pouvez maintenant voir qu'il est écrit faux. Mais si j'utilise is not equal to sine, puis définissez ce fichier. Maintenant, il est écrit deux parce que les deux conditions ne sont pas similaires. C'est pourquoi il est écrit deux. Voici nos opérateurs d'égalité, et maintenant je vais vous montrer ce que sont les opérateurs relationnels Fondamentalement, les opérateurs relationnels fonctionnent avec des valeurs numériques. Nous ne pouvons pas l'utiliser avec une valeur de chaîne. Pour cela, laissez-moi vous montrer un exemple. Je vais supprimer celui-ci et ici je vais taper 50 supérieur à quatre. Je veux dire si le nombre 50 est supérieur à quatre ? Si j'ai défini ce fichier, comme vous pouvez le voir, il est écrit deux. Mais si je passe 60 et que je définis ensuite ce fichier. Comme vous pouvez le voir, cela s'écrit fw Parce que dans notre condition précédente, 50 est supérieur à quatre, mais dans cette condition, 50 n' est pas supérieur à 60 C'est pourquoi nous conditionnons les formulaires écrits. Non seulement cela, nous pouvons utiliser cette valeur avec une unité. Laissez-moi vous montrer 50 pixels et 60 pixels. Si je définis ce fichier, vous pouvez voir qu'il est écrit fg. Mais si je passe 40 semaines ici et que je configure ce fichier, maintenant vous pouvez voir que c'est écrit vrai Non seulement cela, vous pouvez comparer avec différentes unités. Laisse-moi te montrer. Supposons que je veuille comparer avec 1 000 millisecondes supérieures à 1 seconde Si je place ce fichier, vous pouvez voir ici qu'il est écrit vrai. Comme vous pouvez le voir, leur unité est différente, s et, mais leur valeur est la même. C'est pourquoi c'est écrit vrai, ici j'utilise un opérateur relationnel supérieur à égal aide de cet opérateur, nous pouvons comparer si 1 000 s est supérieur à un, dans ce cas , va renvoyer vrai, sinon, si 1 000 s égal à un est, dans ce cas, va renvoyer vrai. Mais si je passe deux secondes ici et que je place ensuite ce fichier, comme vous pouvez le voir, c'est un formulaire de retour. Parce que 1002e n'est pas supérieur à deux secondes. Ici, vous pouvez voir que nous pouvons comparer deux valeurs unitaires différentes avec la même catégorie. Nous pouvons comparer la seconde à minute, à la microseconde, etc. Mais si j'essaie de comparer s avec un pixel, laissez-moi vous montrer 1 000 ms de plus que deux pixels. Ensuite, si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'une erreur écrite car leur catégorie est différente, nous ne pouvons pas comparer le temps avec la région. C'est pourquoi nous devons utiliser la même catégorie. Parlons maintenant opérateurs de Bullion et de la façon dont nous pouvons les utiliser Dans SAS, nous devons identifier trois types d' opérateurs Bollier ou non, et le résultat est toujours écrit vrai ou faux Nous pouvons utiliser tous les opérateurs booléens avec plusieurs conditions Je tiens à dire que si vous souhaitez vérifier plusieurs conditions, vous pouvez utiliser ces opérateurs. Nous utilisons un opérateur si les deux conditions sont vraies, puis si elles sont écrites vraies, sinon elles sont écrites fausses. Non seulement deux conditions, vous pouvez en ajouter d'autres avec cet opérateur. Laissez-moi vous montrer l'exemple. Supposons qu'il s' agisse de la première condition et que j' utilise un opérateur, et que ce soit la deuxième condition. Dans notre condition un, cinq pixels équivalent à cinq pixels. Je veux dire, la condition est vraie et dans notre deuxième condition, police aérienne est égale à une forme réelle Ici, nous comparons à une valeur numérique et ici nous comparons à une valeur de chaîne Comme vous pouvez le constater, les deux conditions sont vraies. Dans ce cas, le résultat reviendra. Et si une condition ne renvoie pas vrai, dans ce cas, elle renverra faux. Ensuite, parlons de notre opérateur de lingots. Si l'une des conditions est vraie, elle est écrite vraie. Sinon, c'est écrit faux. Supposons que nous devions conditionner condition 1 et la condition 2. Dans notre première condition, je compare cinq pixels à 15 pixels et dans notre deuxième condition, nous comparons la police de zone à la zone quatre. Dans ce cas, vous savez que l'une des conditions est vraie, la police aérienne est égale à la police aérienne. Parce que l'une des conditions est vraie, c'est pourquoi elle est écrite vraie. Et si les deux conditions écrites échouent, dans ce cas, le renvoi échouera, et notre dernier opérateur n' est pas opérateur. Il est toujours écrit en valeur opposée. Si la réponse est vraie, elle renverra une fausse réponse, et si la réponse était fausse, elle renverra une réponse vraie. En gros, c'est écrit la réponse opposée. Donc, sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Comme vous pouvez le constater, une fois de plus, je suis de retour à mon éditeur de code Visual Studio. Et maintenant je vais utiliser une condition avec l'opérateur Boulan Dans un premier temps, je vais utiliser cette condition 1 000 millisecad de mieux que 1 seconde Ismein va renvoyer le vrai résultat, comme vous pouvez le voir, c'est Avec cela, je vais utiliser l'opérateur final et cinq pixels , soit cinq pixels. Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car les deux conditions sont vraies. Mais si je fausse une condition, je veux donc changer cinq pixels égaux à six pixels , puis définir ce fichier. Maintenant Seton tombe. Maintenant, les deux conditions ne sont pas vraies, notre première condition est vraie, mais notre deuxième condition échoue. C'est pourquoi son écriture échoue parce que nous avons utilisé un opérateur. Mais si j'ai utilisé un opérateur, alors quoi ? Je vais maintenant utiliser notre opérateur. Ou si je définis ce fichier, il renverra deux car, comme vous le savez, si l'une des conditions est vraie, il en renverra deux. Et si les deux conditions échouent, laissez-moi vous montrer. Je vais changer deux secondes puis configurer ce fichier comme vous pouvez le voir, son écriture échoue. Et si les deux conditions sont vraies, dans tous les opérateurs, dans ce cas, encore une fois, et si vous combattez le pixel puis définissez ce fichier, comme vous pouvez le voir, il est écrit vrai. Donc, dans notre opérateur, à la fois la condition ou l'une des conditions est vraie, dans ce cas, elle va redevenir vraie. Je vais maintenant vous montrer le dernier opérateur allégé qui n'est pas utilisable et comment nous pouvons l'utiliser Donc, dans un premier temps, je vais dupliquer cette diapositive, et je vais commenter la précédente. Ici, je vais utiliser not operator. Je souhaite supprimer cette condition et d'abord, je vais taper non. Comme vous le savez, l'opérateur n'écrit pas toujours le résultat opposé. Donc cinq pixels sont égaux à cinq pixels. Comme vous le savez, la condition est vraie. Si je définis ce fichier, vous pouvez voir ici qu'il s'agit de formes écrites car il est écrit toujours en sens inverse. Mais si la condition échoue et si j'utilise l'opérateur pas égal à cinq pixels, cinq pixels différents de cinq pixels et que je définis ce fichier, maintenant il est écrit vrai. Comme la condition échoue, c'est pourquoi elle est également renvoyée. Cela renvoie toujours le résultat opposé. J'espère que vous comprenez maintenant ce que sont les opérateurs de Bollan. Merci donc d' avoir regardé cette vidéo, restez à l'affût de nos prochains tutoriels. 10. Tutoriel des opérateurs Sass II: Bonjour, les gars. C'est bon de te revoir. Ceci est un autre tutoriel, associé à l'opérateur CS. Et dans ce tutoriel, nous allons apprendre l' opérateur numérique CS et l'opérateur de chaîne SS. Comme je vous l'ai dit, dans mon précédent tutoriel, nous avons cinq opérateurs différents dans SAS : opérateur d'égalité, opérateur relationnel, opérateur numérique, opérateur chaîne et opérateur Wulian Nous avons déjà abordé l'opérateur d'égalité, l'opérateur relationnel et un opérateur dans notre précédent didacticiel Dans ce didacticiel, nous allons aborder l' opérateur numérique et l'opérateur de chaîne . Commençons. Dans un premier temps, je vais parler de l'opérateur de chaîne. L'opérateur de chaîne signifie opérateur de concaténation et nous définissons cet opérateur en utilisant Nous utilisons cet opérateur pour ajouter une chaîne à une autre chaîne. En utilisant cet opérateur, nous pouvons rejoindre une rue différente. Non seulement cela, nous pouvons joindre une valeur numérique à la chaîne el. Non seulement cela, en utilisant cet opérateur, nous pouvons joindre une valeur numérique à une chaîne viel Si vous connaissez JavaScript, vous le savez déjà. Permettez-moi de vous montrer un exemple. Ici, vous pouvez voir 50 pixels plus. Ici, nous voulons joindre une chaîne hel à une onde numérique. Par conséquent, il a renvoyé 50 pixels. D'autre part, nous avons les opérateurs numériques, l'addition, la soustraction, la multiplication, la division, le module, sinon nous appelons Nous utilisons cet opérateur pour les calculs arithmétiques. Commençons par la pratique et essayons de comprendre comment nous pouvons l'utiliser. Comme vous pouvez le voir, j' ouvre déjà mon logiciel de compilation CS Koala, vous pouvez également le voir côte à côte dans mon coretor Visual Studio, j'ouvre mon fichier CS et mon fichier CSS Donc, dans un premier temps, je vais vous montrer comment nous pouvons utiliser les opérateurs de chaîne. Pour cela, je vais créer deux variables. Un dollar, un colon, et je vais en prendre 50. Ensuite, je vais supprimer cette ligne, et voici les deux. Ici, je vais en prendre cinq. Il s'agit de la variable 1, et il s'agit de la variable 2. Maintenant, je vais le styliser class dot class one. Ensuite, en ce qui concerne les foies, je vais prendre une propriété du NCSS Supposons une marge pour la valeur, je vais utiliser la variable un, un. Un. Ensuite, je vais utiliser la concaténation Après la concaténation sine, je vais passer px. Ici, vous pouvez voir notre valeur numérique écrite V un, et je veux concaténer Var un avec j'ai configuré ce fichier, comme vous pouvez le voir, il est écrit Margin 50 pixels. Nous joignons donc ici deux types de valeurs différents en utilisant opérateur de chaîne et nous appelons cette méthode la concaténation Sur ce, je vais vous montrer comment utiliser les opérateurs numériques Donc, avec elle, je veux ajouter 2,02$. Jusqu'à deux, encore une fois, je vais utiliser concatenate Maintenant, le signe 1-2 n'est pas un signe de concaténation C'est un sinus d'addition, mais ce signe va agir comme un signe de concaténation Donc, si je définis ce fichier, vous pouvez voir ici que notre marge est de 55 pixels. Donc, comme vous le savez, en utilisant l'opérateur d' addition, nous pouvons ajouter deux valeurs, mais maintenant je vais utiliser l'opérateur de soustraction. Minus. Si j'ai configuré ce fichier, vous pouvez maintenant voir que notre nouvelle marge est de 45 pixels. C'est un rayon de 5 pixels à partir de 50 pixels. C'est pourquoi il est écrit 45 pixels. C'est le cas d'utilisation de l'opérateur de substruction, et de cette façon, nous pouvons l'utiliser De même, nous pouvons utiliser le côté multiplication. Si je configure ce fichier, vous pouvez voir le résultat, 250 pixels. Si j'utilise le sinus de division puis que je définis ce fichier, vous pouvez voir que la réponse est dix pixels et maintenant je vais utiliser notre opérateur de luxure, qui est le module Laissez-moi vous montrer comment faire. Si nous utilisons le signe du module, il vous rappellera jusqu'à la division Si je configure ce fichier, comme vous pouvez le voir, il n'y a aucun rappel, c'est pourquoi il renvoie zéro pixel. Mais si je change la valeur de Var un, 54, puis que je définis ce fichier, vous pouvez maintenant voir que le rappel est de quatre. C'est donc le cas d'utilisation de l'opérateur de module. Donc, en gros, nous n'utilisons pas cet opérateur numérique de cette façon Nous l'utilisons lorsque nous créons des designs complexes. Laisse-moi te montrer. Donc, pour cet exemple, je vais prendre une nouvelle propriété, qui est la taille de police. Taille de police, et je vais utiliser Var One. Congélatinez avec un pixel. Si je configure ce fichier, vous pouvez voir le résultat. La taille de police de classe 1 est de 54 pixels. Mais pour notre balise header one, je veux deux fois la taille de police, puis la classe un. Permettez-moi de vous montrer la taille de police. Dollar un, multipliez par deux pixels concaténés concaténés. Si je définis ce style, vous pouvez voir le résultat. Maintenant, la taille de police de notre titre 1 est de 108 pixels car je veux afficher deux fois la taille de police puis la classe 1, puis la classe 1. C'est pourquoi j'utilise un opérateur de multiplication. Dans notre première classe, cela s'écrit 54 pixels et dans notre titre 1, il est écrit 108 pixels. De cette façon, nous utilisons des variables et un opérateur numérique ensemble, plupart du temps nous l'utilisons avec condition p sinon des boucles, et nous allons en apprendre davantage à ce sujet dans notre prochain tutoriel, c' est donc tout pour ce Dans le prochain tutoriel, nous allons apprendre un nouveau concept de flux lié à un nouveau concept, à savoir l'interpolation. Restez à l'affût pour notre prochain tutoriel. Merci d'avoir regardé cette vidéo. 11. Tutoriel d'interpolation Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre l'interpolation, l'interpolation SAS Dans notre précédent tutoriel, nous avons appris les opérateurs de chaînes de caractères. Avec cela, nous apprenons les opérateurs de concaténation de chaînes. En utilisant la concaténation de chaînes, nous pouvons ajouter une valeur de chaîne avec une valeur numérique comme vous pouvez voir le résultat. Vous pouvez le voir ici. Comme vous pouvez le voir ici, 50 concatent avec le pixel et, par conséquent, le résultat est de 50 pixels Mais le problème est que nous ne pouvons pas utiliser concatation sinusoïdale dans les propriétés CSS Nous ne pouvons l'utiliser que dans les valeurs CSS. De plus, nous ne pouvons pas utiliser la concaténation sinusoïdale dans le sélecteur CSS. Permettez-moi de vous montrer un exemple. Ici, vous pouvez voir que je prends une marge de nom de propriété, un trait d'union de marge, une concaténation sinusoïdale, et j'appelle une Vous pouvez mettre n'importe quelle valeur ici, lab, en haut, à droite, je veux dire, en supposant une marge supérieure à 20 pixels, mais nous ne pouvons pas utiliser la concaténation sinusoïdale à cet endroit Permettez-moi de vous montrer un autre exemple avec un sélecteur. Supposons qu'il existe une classe nommée image point image hyphen concatenate with imaging, mais que nous ne pouvons pas utiliser concaténation Nous ne pouvons utiliser la concaténation que dans nos vannes. Mais pour ce type de conversation SAS introduit l' interpolation Si vous voulez entrer en contact avec des propriétés, sinon des classes, dans ce cas, nous devons utiliser la méthode d' interpolation et nous devons utiliser ce signe, ce hashtag et ce clirass À l'intérieur de la calrass, nous devons placer la variable line, puis nous pouvons regrouper nos propriétés et nos classes. Permettez-moi de vous montrer l'exemple. Si vous souhaitez regrouper ces propriétés et la classe, dans ce cas, nous devons taper En fusionnant le hashtag du trait d'union dans le calirass, nous devons passer la position variable du membre C'est pour la propriété. De même, pour une classe, nous devons suivre la même méthode. Après le hashtag, nous devons utiliser Calirasis, puis à l'intérieur du calirasis, nous devons passer le nom de la variable Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, j' ouvre déjà mon application Kuala, et dans mon éditeur de code Visual Studio, j'ouvre côte à côte le fichier CS et notre fichier CSS Commençons par la pratique et voyons comment utiliser l' interpolation. Dans un premier temps, je vais déclarer un mixage. Au mixage en D. Et le nom de notre mixage est Margin. Et entre cette parenthèse, je veux passer deux paramètres ou la première variable m est la position, et notre deuxième variable m est l'unité Je vais aussi parler du mixage dans notre classe. Laisse-moi te montrer. Je vais sélectionner une classe point class one. Dans les alias, je vais inclure le mixage. Ajoutez le rouge, incluez, et le nom de notre mixage est margin. Dans un premier temps, je vais transmettre la valeur de la position. Notre position est gauche. Après la position, nous devons passer l'unité ici, je vais passer 20 puis un point-virgule pour terminer cette ligne Maintenant, dans ce mixage, je vais prendre notre propriété CSS qui est la marge. Marge, tiret, ici je vais utiliser la méthode de l'interpolion Hashtag Cariss. Maintenant, je veux concatérer la marge avec une autre variable, et ici je vais passer la variable de position, Comme vous pouvez le voir, dans notre variable de position, nous passons la valeur gauche, puis après colonne pour valeur, je vais utiliser la variable d'unité. Unité de dollar. Je veux congaténer avec un pixel Puis un point-virgule pour terminer cette ligne. Si je définis ce fichier, comme vous pouvez le voir dans mon fichier CSS, il imprime une marge de 20 pixels. Maintenant, nous pouvons changer de position en tapant simplement le nom. Supposons que je passe le sommet et qu'ici je passe les 40. Si je définis ce fichier, vous pouvez maintenant voir la marge supérieure à 40 pixels. Ici, vous pouvez le voir, nous utilisons un mixage appelé margin et à l'intérieur de ce mixage, nous utilisons la méthode d'interpolation Et nous transmettons la valeur de ce mélange et nous nous contentons avec la propriété CSS, et nous condensons également la chaîne avec l'unité. Il s'agit de l'interpolation uskSot, c'est l'interpolation uskaso. Dans cet exemple, nous utilisons interpolion avec la propriété CSS, et maintenant je vais utiliser interpolion Pour cela, je vais créer un autre mixage. Au rouge, mixez, et notre nom de mixage est set image, SET IMG. Ensuite, à l'intérieur du caliass et entre parenthèses, je veux passer un paramètre, et le nom de notre paramètre est dollar mail Maintenant, dans les alias, je veux regrouper notre sélecteur, point, image, tiret , tag Dans la liste, je vais appeler le nom de l'image. Nous utilisons donc ici l'interpolation pour confiner notre sélecteur. Ensuite, dans le foie, je vais utiliser une propriété CSS, qui est une image de fond Arrière-plan, image, et je vais utiliser l'URL Vu pour l'image d'arrière-plan. URL entre parenthèses, à l'intérieur des codes doubles, nous devons indiquer l'emplacement du fichier, et l'emplacement de notre fichier est image, couper notre image Ici, nous pouvons également utiliser méthode Interpoliion pour prendre le nom de l'image. Laisse-moi te montrer. Hashtag dans les alias, je vais passer la variable, qui est le nom Après le nom de l'image, nous devons transmettre l'extension de l'image, et notre extension est JPG. Nous devons maintenant appeler ce mixage et transmettre le nom de l'image. Pour appeler le mixage, tapez au tarif inclus. Ensuite, nous devons transmettre le nom du mixage, définir l'image, définir l'image. Nous devons également transmettre le nom de l'image. Supposons que le nom de notre image soit Cloud. Et puis le point-virgule deux sur cette ligne. Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord un sélecteur CSS, image Cloud, puis il crée le nom de l'image cloud point JPG En utilisant l'interpolation, nous pouvons concaténer le sélecteur CSS, et nous pouvons également l'utiliser comme nom d'image car nous ne pouvons pas utiliser le signe plus pour concaténer le sélecteur CSS et les propriétés C'est pourquoi CS a introduit l'interpolation CSS. J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 12. Tutoriel sur les fonctions Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel concernant SAS. Dans ce tutoriel, nous allons apprendre les fonctions SAS. Si vous connaissez déjà JavaScript, vous savez ce qu'est une fonction. Je vais donc vous montrer comment créer des fonctions dans SAS. Pour créer une fonction dans SAS, vous devez d'abord utiliser un mot clé et dilater la fonction, puis le nom de votre fonction N'oubliez pas de ne pas laisser d'espace entre les noms. Vous pouvez l'utiliser autrement sous sco sine, mais ne fournissez aucun espace. Ensuite, entre parenthèses, vous pouvez prendre un paramètre, plusieurs paramètres, sinon aucun paramètre Cela dépend de vous. Pour cet exemple, j'ai pris un paramètre, c'est-à-dire une variable, et le nom de notre variable est value. Ensuite, vous devez utiliser des étalonnages. Si vous vous souvenez, la fonction et le mixage sont assez similaires, mais il y a une différence. Fondamentalement, la fonction peut renvoyer un Val. Il peut renvoyer des calculs arithmétiques, mais pas le mixage Mais les mixages impriment toujours ce qui a déjà été écrit lors du mixage, mais les fonctions écrivent des valeurs, et nous pouvons utiliser cette valeur dans nos prochains codes Supposons que je crée un nom de classe un tiers et qu'à l'intérieur de ce sélecteur, comme vous pouvez le voir, j'utilise une propriété nommée avec nous appelons notre fonction et nous passons une valeur 1 200 Ensuite, notre fonction va diviser cette valeur par trois et renvoyer 400, puis elle concatène le nombre en pixels dans notre CSS, elle passe à Laissez-moi vous montrer un scénario qui peut dissiper vos doutes. Supposons que nous ayons un conteneur parent et que sa largeur soit de 1 200 pixels, et maintenant je veux diviser cette largeur en trois parties. Dans ce cas, chaque cellule prend 400 pixels. Pour cela, nous pouvons créer une fonction qui peut diviser notre conteneur en trois par. Si nous changeons la largeur de ce continuateur, il le divise automatiquement en trois par. De même, si nous voulons diviser ce continuateur en deux parties, dans ce cas, nous devons créer une fonction qui peut diviser notre valeur en deux parties. Supposons qu'à l'avenir, vous souhaitiez modifier l'identifiant externe. Quelque chose de 1 500 pixels. Dans ce cas, notre fonction va détourner le continu avec une taille égale, 500 pixels, 500 pixels et 500 pixels C'est le cas d'utilisation de la fonction, nous n'avons donc pas besoin de taper la largeur des cellules manuellement. Nous allons le calculer à l' aide de la fonction. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Une fois de plus, je suis de retour chez mon coordinateur de studio visuel. côte, j'ouvre le fichier style point S et le fichier style CSS. Dans un premier temps, je vais définir une largeur de conteneur. Pour cela, je vais prendre une variable. Et notre variable nm est la largeur CN , deux points et pour notre largeur continue, je vais prendre 1 000. Pour l'instant, je vais prendre n'importe quelle unité comme le pixel, le M, etc. Je vais maintenant créer une fonction qui va diviser mon continuari en trois parties Donc, pour créer une fonction, je vais taper AdErdFunction, et le nom de notre fonction est un tiers, un tiers Puis, entre parenthèses, l'utilisateur va passer un paramètre Pour ce paramètre, je vais prendre une herbe à dollar variable. Ensuite, dans les alias, quel que soit l'utilisateur à transmettre, je veux le diviser en trois parties Donc, pour cela, je vais utiliser le mot clé return. Au retour rouge. Ensuite, la largeur du dollar est divisée par trois, parce que je veux diviser également la largeur de la suite en trois parties, puis je vais utiliser concaténer s C'est pour l'unité car, par conséquent, je souhaite renvoyer l'unité en pixels. Nous avons donc réussi à créer notre fonction et le nom de notre fonction est un tiers, et maintenant je veux appeler cette fonction. Pour appeler la fonction, nous devons donner un style à une classe, et le nom de notre classe est un tiers de weed. Ensuite, à l'intérieur de la voiture, résistez, je vais l'appeler propriété et nom de notre propriété est le même. Quoi. Maintenant, je vais appeler notre fonction, et le nom de notre fonction est un tiers, un tiers. Ensuite, dans cette parenthèse, je vais passer cette variable Avant de définir ce fichier, permettez-moi de modifier la largeur du conteneur. Je vais remplacer 1 000 par 1 200. Si je définis ce fichier, comme vous pouvez le voir, largeur d'un tiers de notre conteneur est de 400 pixels. Donc, à l'avenir, si je change la largeur du conteneur, 1 200 pixels à 500 pixels, puis que je définis ce fichier , vous pouvez voir qu'il est toujours écrit au tiers de la largeur de ce conteneur, soit 500 pixels. C'est le cas d'utilisation de la fonction. De même, si vous souhaitez diviser la largeur de votre conteneur en deux parties, dans ce cas, vous devez créer une autre fonction. Certains pour dupliquer cette fonction, et je vais changer le nom de la fonction, et le nom de notre fonction est. Mais cette fois, nous devons diviser la largeur du continuateur en deux parties. Je vais donc diviser par deux. Comme je vais créer et aussi créer un sélecteur pour cela. Laisse-moi te montrer. Le nom positif que nous avons sélectionné est largeur du hub, largeur du hub. À l'intérieur des aliras, je vais appeler la largeur En tant que valeur, je vais appeler notre nouvelle fonction et le nom de notre nouvelle fonction est hub. Et entre parenthèses, je vais passer ici notre largeur de conteneur variable Et aussi, je vais changer la largeur du conteneur, 1 500 pixels à 1 200 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir notre fonction hub diviser notre conteneur en deux parties et renvoyer 600 pixels pour une partie, et notre troisième fonction diviser notre conteneur en trois parties, et chacune des parties à 400 pixels. Vous savez maintenant comment utiliser les fonctions pour les calculs arithmétiques Dans le prochain tutoriel, nous allons donc apprendre les fonctions du voile SAS. Merci donc d' avoir regardé cette vidéo, restez à l'affût de nos prochaines tribus. 13. Tutoriel sur les fonctions de numéro de SAS: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié à CS, et dans ce didacticiel, nous allons apprendre les fonctions numériques SAS Ici, vous pouvez voir que les C ont un total de six dans la fonction val, la fonction des nombres, la fonction chaîne, la fonction de couleur, la dernière fonction, la fonction sélection, et le dernier est l'intropetion Dans ce tutoriel, nous allons apprendre uniquement les fonctions numériques. Voyons combien de fonctions numériques nous avons dans CS. Comme vous pouvez le voir, nous avons un total de 11 fonctions numériques dans CS, et nous allons aborder toutes ces fonctions dans ce didacticiel. Commençons par l'aspect pratique avec la fonction Avis. Physiquement, Avis fonctionne sous forme de volonté absolue écrite. Commençons la pratique. Comme vous pouvez le voir, j'ouvre déjà mon éditeur de code User Studio et côte à côte, j'ouvre Styloid SS Pile et Styled Dans un premier temps, je vais créer une classe point class one. Ensuite, à l'intérieur des calices, je vais d'abord prendre AcSSPProperty et je vais Rembourrage. Notre première fonction est Avis qui signifie fonction absolue. Tabs de type Sham Row. Cette fonction écrit toujours une valeur absolue. Si je passe une valeur négative, laissez-moi vous montrer -14 pixels Si je définis ce fichier, comme vous pouvez le voir, il est écrit en valeur absolue, 14 pixels. Il a supprimé la valeur négative et écrit 14 pixels. Si je supprime le signe moins puis que je définis ce fichier, comme vous pouvez le voir, c'est toujours une valeur absolue écrite. Passons maintenant à notre prochaine fonction, qui est L. Mais avant, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais utiliser la fonction cellulaire C CEL. Ensuite, dans les versets ao, je vais passer une valeur flottante. Laisse-moi te montrer. 5.3. Et même si je définissais ce fichier, laissez-moi vous le montrer. Si je définis ce fichier, comme vous pouvez le voir, il est écrit avec six feuilles Si j'utilise la fonction de cellule à chaque fois qu'elle renvoie une valeur supérieure. Si j'utilise 5.9 et que je définis ce fichier, il renvoie également six Mais si j'utilise 5.1 et que je définis ce fichier, il renvoie également six. Il est toujours écrit au-dessus de la valeur. Mais si je passe la version 5.0 puis que je définis ce fichier, maintenant il n'en écrit que cinq. Si je passe une valeur flottante dans la fonction de cellule, elle est toujours écrite au-dessus de la valeur. De même, nous avons une fonction opposée. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Et ici, je vais taper floor function FL W R. Ensuite, à l'intérieur de la rondeur je vais passer quatre et sept Cette fonction est toujours écrite en dessous de la valeur. Si je définis ce fichier, comme vous pouvez le voir, il n'en écrit que quatre. Sans zéro, la valeur que nous utiliserons après le point ne renverra que quatre. Si je passe neuf ici, c'est aussi écrit quatre. Passons à la fonction suivante, qui est la fonction ronde pour demander cette ligne et commenter la précédente Et ici, je vais taper round function. Si je place ce fichier, comme vous pouvez le voir, il est écrit cinq. Cette fonction est une combinaison de la fonction d'étanchéité et de la fonction de flotteur. Après Dhimil, si la valeur est supérieure à quatre, la valeur a est toujours écrite Mais un Djimil, si la valeur est inférieure à cinq, il renverra la valeur wow Laissez-moi vous montrer que si je passe, 4.4 ici, puis que je place ce fichier, comme vous pouvez le voir, maintenant il n'en est écrit que quatre. Mais si je passe 415 et que je place ensuite ce fichier, vous pouvez voir qu'il est écrit cinq. C'est le cas d'utilisation de la fonction ronde. J'espère que vous comprenez maintenant comment fonctionnent les fonctions de vente et de gestion. Notre fonction suivante est la fonction maximale. Je veux que tu commences cette ligne et que tu retrouves la précédente. Et ici, je vais appeler max function. Cette fonction renvoie toujours la valeur maximale. Supposons que nous ayons trois valeurs, laissez-moi vous montrer un pixel, trois pixels et cinq pixels. Si je disais ce fichier, comme vous pouvez le voir, il est écrit en cinq pixels. Il est toujours écrit la valeur maximale à partir de la valeur la plus faible. la même manière, nous avons une fonction opposée, qui est la fonction min. Sonnez cette ligne et commentez la précédente, et ici je vais appeler notre fonction Min. Si je définis ce fichier, comme vous pouvez le voir, il est écrit avec la valeur la plus basse de cette liste. Il s'agit toujours de la valeur la plus basse. En gros, nous n'utilisons pas cette fonction comme ça. Lorsque nous devons travailler avec des calculs arithmétiques complexes, nous utilisons cette fonction Parlons maintenant de notre fonction suivante, qui est percentis So, pour commencer cette ligne et commenter la précédente Et ici, je vais taper les percentis. Cette fonction renvoie toujours la valeur en pourcentage. Si je passe la version 0.3, je place ce fichier, comme vous pouvez le voir, il est écrit à 30 %. De plus, si je travaille avec le calcul arithmétique, laissez-moi vous montrer 200 pixels divisés par 50 pixels Si je définis ce fichier, comme vous pouvez le voir, il est écrit à 400 %. Cette fonction renvoie toujours un pourcentage. Notre fonction suivante est comparable. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais taper comparable. Grâce à cette fonction, nous pouvons comparer deux unités. Si les unités correspondent, elles sont écrites, vraies, sinon, ce sont des formes écrites. Je vais vous montrer la démonstration. Ici, je vais passer deux pixels et notre prochaine valeur est quatre pixels. Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car leurs unités sont les mêmes, pixel et pixel. Mais si je passe l'unité EM puis que je définis ce fichier, EM et que je définis ce fichier, comme vous pouvez le voir, maintenant c'est écrit sous forme de fobs Parce que leur unité est différente. C'est pourquoi nous n'avons pas pu le comparer. Mais si je passe la valeur centimétrique ici, CM, et si je passe l'unité MM, puis que je définis ce fichier, comme vous pouvez le voir, il est maintenant écrit parce que nous pouvons comparer centimètre par millimètre C'est pourquoi c'est écrit. Parlons de notre prochaine fonction, qui est aléatoire. Je vais dupliquer cette ligne et commenter la précédente. Je vais donc taper au hasard. Cette fonction écrit toujours une valeur aléatoire. Si je place cette pile, comme vous pouvez le voir, elle est écrite avec une valeur aléatoire. Si je définis à nouveau ce fichier, vous pouvez voir qu'il est écrit avec une valeur aléatoire différente. Par défaut, la fonction aléatoire écrit la valeur 0-1. C'est pourquoi il s'agit d'une valeur flottante écrite. Mais si je passe un chiffre, quelque chose 12, puis que je place ce fichier, maintenant il est écrit un chiffre de 0 à 12 Il peut s'agir de n'importe quel chiffre de 0 à 12, et dans notre cas, il s'écrit dix Si je configure à nouveau ce fichier, vous pouvez maintenant voir qu'il en a été écrit un. Parlons de notre prochaine fonction, qui est l'unité. Pour cela, je vais modifier cette ligne et commenter la précédente Et ici, je vais taper unité. Pour cet exemple, je vais passer un chiffre, qui est 22. Si je définis ce fichier, comme vous pouvez le voir, il n'est écrit que les codes doubles, pas le nombre car nous ne transmettons aucune unité, mais si je passe le pixel PH puis que je définis ce fichier, comme vous pouvez le voir, il n'est écrit que le pixel unitaire. La fonction de l'unité écrit toujours l'unité. De même, si je passe le centimètre, le cm, puis que je place ce fichier, vous pouvez voir ici qu'il est écrit centimètre Parlons maintenant de notre dernière fonction, qui est une unité inférieure. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Et ici, je vais taper unitless. En gros, cette fonction va revenir à la valeur, soit vraie, soit fausse. En gros, cette fonction va vérifier, fournissons-nous à l'unité cette valeur ou non ? Si je définis ce fichier, comme vous pouvez le voir, il est écrit faux. Parce que nous fournissons une unité, c'est pourquoi elle est écrite fausse. Mais si je ne fournis pas l'unité, j'ai défini ce fichier, comme vous pouvez le voir, maintenant il est écrit vrai. Nous pouvons utiliser cette fonction avec des conditions IP. Dans le prochain tutoriel, nous allons apprendre les fonctions liées aux chaînes de caractères. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 14. Tutoriel des fonctions de chaîne de caractères Sass Part1: Bonjour les gars, content de vous voir B. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CAS. Et dans ce tutoriel, nous allons apprendre la fonction de chaîne CS. Vous pouvez voir ici la liste des fonctions invalides de SAS. Dans nos précédents tutoriels, nous allons en apprendre davantage sur la fonction numérique. Et dans ce tutoriel, nous allons apprendre les fonctions de chaîne. Voyons donc les fonctions de chaîne. Comme vous pouvez le voir, nous avons un total neuf fonctions de chaîne dans SAS. Fonction Cote en majuscules, fonction index STR, fonction en minuscules, fonction insertion en étoile, fonction d'identification unique, fonction Star len, fonction uncoat et fonction Star slice et Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, je suis dans mon coordinateur de studio visuel, et côte à côte, j'ouvre Stylar CS et le fichier de style CSS Donc, d'abord, je vais créer une classe, et notre nom de classe est class one. Ensuite, dans le fichier arise, je vais utiliser la propriété CSS, et le nom de notre propriété est famille de polices. Famille de polices. Mais ici, je ne vais pas utiliser directement le nom de la famille de polices. Pour cela, je vais utiliser une fonction de chaîne et nom de notre fonction de chaîne est co Quote. Ensuite, à la place des parenthèses, je vais appeler le nom de la famille de polices et le nom de notre famille de polices est Ariel En gros, la fonction de code va envelopper cette chaîne avec des codes doubles. Si je place ce fichier, vous pouvez voir le résultat ici. Famille de polices à l'intérieur des codes doubles al. Dans le cas contraire, nous avons une autre fonction, qui est uncode Si j'utilise uncode et que j'insère ce nom de police dans les codes doubles, puis que je définis ce fichier, comme vous pouvez le voir, cela supprime le guillemet de la chaîne C'est le cas d'utilisation de la fonction uncode. Passons à la fonction suivante, qui est composée de deux majuscules Ici, je vais attacher deux majuscules. Affaire. En gros, cette fonction va convertir cette chaîne en majuscules Si je place ce fichier, comme vous pouvez le voir, toutes les lettres sont en majuscules la même manière, nous avons une fonction opposée, qui est composée de deux minuscules Si je tape deux lettres plus petites, puis que je place ce fichier, comme vous pouvez le voir, il convertit notre lettre majuscule A en minuscule. En gros, il convertit les majuscules en minuscules. Passons à la fonction suivante, qui est la longueur de chaîne. Ici, je veux taper notre fonction suivante, qui est St length. Longueur de l'étoile. Quelle que soit la valeur de chaîne que nous transmettons dans cette fonction de chaîne, elle compte le caractère de la chaîne et renvoie la longueur en nombre. Comme vous pouvez le voir dans le monde aérien, nous avons un total de cinq personnages. Si je définis ce fichier, oups, il y a une erreur. L'orthographe de l'objectif n'est pas correcte, LONGUEUR. Si je configure ce fichier, vous pouvez voir le résultat. Il est trois et cinq ans. C'est le cas d'utilisation de la fonction de longueur STR. Parlons de notre prochaine fonction, qui est string index. Je vais appeler cette fonction string index. Ensuite, entre parenthèses, dans cette fonction en tant que premier paramètre, nous devons passer cette chaîne J'ai déjà copié une chaîne et je vais la coller ici. C'est un abruti de La Mpsum. Mais d'abord, commençons par le mot wrap. En utilisant cette fonction, nous pouvons rechercher un caractère ou un mot cette chaîne et son numéro d'index écrit. Comme vous pouvez le voir, en tant que premier paramètre, nous passons cette chaîne. Ensuite, dans notre deuxième paramètre, je veux rechercher le mot factice Dans les accords doubles, je vais dépasser Dummi. Si j'ai défini ce fichier, comme vous pouvez le voir, il est écrit 23. C'est écrit le numéro d'index d'un foutu texte. Si vous comptez les caractères, D serait 23, laissez-moi vous montrer un autre exemple. Maintenant, je veux rechercher le mot Lorem dans le stream. Je vais donc taper Loren. Si je définis ce fichier, comme vous pouvez le voir, il en est écrit un parce que mots Lem commencent à partir du premier index. C'est pourquoi il en a été écrit un. N'oubliez pas qu'il s'agit également de compter l'espace entre les mots. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder la fonction d'insertion de chaîne, la fonction QQ ID et la fonction de tranche de chaîne Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 15. Tutoriel des fonctions de chaîne de caractères Sass Part2: Bonjour les gars, c'est bon de vous revoir. Il s'agit de la deuxième partie de SAStringFunctions. Et dans ce didacticiel, nous allons apprendre la fonction d' insertion de chaîne, la fonction d'identification unique et la fonction de tranche de chaîne. Alors, sans perdre votre temps, étudions la pratique. Comme vous pouvez le constater, à l'intérieur de la visière, j' ouvre nos Donnez du style à votre fichier CS et à votre fichier de thèse. Supposons que je veuille insérer un mot dans cette chaîne. Pour cela, nous devons utiliser la fonction d'insertion de chaînes. Donc ici, je vais taper string insert. Je souhaite ajouter un mot de bonjour. Alors voilà, je vais taper bonjour. Je veux ajouter le mot bonjour au début de cette chaîne. Pour cela, il faut passer un autre paramètre. Donc ici je vais taper une virgule, et ici je vais passer le numéro d'index Premièrement, je vais fournir un espace à cet endroit. Et aussi, je vais fournir de l'espace après O. Donc, si je configure ce fichier, vous pouvez voir le résultat. En utilisant la fonction Insérer, nous pouvons insérer un mot ou un caractère dans ce flux, et nous devons transmettre le numéro d'index. C'est ça. Laissez-moi vous le montrer encore une fois. Supposons que cette fois je veuille ajouter mot Ipsum dans ce flux Je copie ce mot et je le supprime, et ici je vais passer le mot Ipsum Et maintenant, je veux insérer le mot Ipsum jusqu'à uen. Pour cela, je vais compter les numéros d'index exacts un, deux, trois, quatre, cinq, six. Alors voilà, je vais passer devant Sebin parce que je veux aussi fournir un espace up uen Donc, si je configure ce fichier, vous pouvez voir le résultat Lorem Ipsum C'est donc le cas d'utilisation de la fonction d'insertion. Parlons de notre prochaine fonction. Notre fonction suivante est string slice. Ici, je vais taper STR slice. Supposons que je veuille découper le mot Lorem de cette chaîne. Dans ce cas, nous devons passer aux deux paramètres. Laisse-moi te montrer. Dans notre premier paramètre, nous devons transmettre notre chaîne, et dans notre second paramètre, nous devons transmettre le numéro d'index. Comme vous pouvez le voir, le mot Lorem se termine au cinquième index. Alors voilà, je vais en passer six. Si je définis ce fichier, vous pouvez maintenant le voir supprimer Lem Word et imprimer est simplement dammitext Mais dans notre exemple suivant, je voudrais renvoyer un mot. Dans ce cas, nous devons transmettre un total de trois paramètres, notre numéro d'index de départ et notre numéro d'index de fin, qui est neuf. Si je définis ce fichier, comme vous pouvez le voir, le retour est. Ainsi, en utilisant cette fonction, nous pouvons découper n'importe quelle section de notre chaîne. Parlons de notre dernière fonction, qui est l'identifiant unique. Dans un premier temps, je vais les supprimer tous, et ici je vais taper un identifiant unique. pièce d'identité. Ensuite, notre parenthèse et notre point-virgule deux sur cette ligne Si je définis ce fichier, comme vous pouvez le voir, il contient un identifiant unique. Elle renvoie des caractères aléatoires. Si je reconfigure ce fichier, chaque fois qu'il est écrit un nouvel identifiant, et Bt fold, cette fonction écrit toujours un identifiant unique à neuf caractères. En gros, nous utilisons cette fonction avec des conditions IP. Je couvre toutes ces fonctions de chaîne. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 16. Tutoriel sur les fonctions de couleur Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel passionnant lié à CS. Et dans ce tutoriel, nous allons apprendre les fonctions de couleur CS. Comme je vous l'ai dit plus tôt, CS est livré avec des fonctions non valides. Fonction numérique, fonction de chaîne, fonction de couleurs, fonctions de liste, fonction d' électeur et fonction d'introspection Nous avons terminé la fonction numérique et la fonction chaîne dans notre précédent tutoriel. Dans ce tutoriel, nous allons apprendre la fonction des couleurs. Sans perdre votre temps, voyons combien de fonctions de couleur nous avons dans notre CAS. Dans ce didacticiel, nous allons aborder les fonctions CS de base mais importantes, à savoir éclaircir, assombrir, ajuster, saturer, désaturer, mélanger Je sais que nous avons besoin de plus de sept couleurs liées aux fonctions dans SAS, mais ce sont les plus importantes. C'est pourquoi je vais aborder ces sept fonctions. Commençons donc par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Coreator et mon navigateur en utilisant l'extension de serveur if J'ai déjà créé un document HTML nommé index point HTML. Avec cela, je crée déjà un Style Door CS et un fichier CSS stylisé Comme vous pouvez le voir dans mon navigateur, nous devons faire deux D, classe un et classe deux. première classe était remplie d'une couleur de fond rose et la classe deux était d'une couleur de fond vide. Passons au fichier CS et voyons ce que nous avons fait. Comme vous pouvez le constater, dans un premier temps, nous créons une couleur de base variable pour les membres, et notre couleur de base est le rose. Ensuite, nous personnalisons nos trempettes et définissons une bordure. Ensuite, dans notre première classe, nous définissons la couleur d'arrière-plan, qui est notre couleur de base rose, et nous ne définissons aucune couleur de fond dans notre classe deux. Maintenant, je vais modifier cette couleur et je veux remplir ce champ avec la forme foncée de cette couleur rose. Pour cela, je vais utiliser une fonction nommée darken. Donc, d'abord, je vais utiliser la propriété CSS, qui est l'arrière-plan. Contexte, et je vais appeler notre fonction. Ici, je vais taper Darken. Ensuite, entre parenthèses, nous devons fournir une couleur Pour la couleur, je vais utiliser la même couleur, qui est la couleur de base. Je vais copier la variable et la coller ici. Ensuite, dans notre deuxième paramètre, nous devons fournir la valeur 0-100 % Donc, ici, je veux passer les 30 %. Donc, si je mets ce fichier, vous pouvez voir ici notre conteneur rempli 30 % de découpe foncée en plus que le précédent. Et si je vous montre mon style ou mon fichier CSS, comme vous pouvez le voir, cela crée une nouvelle couleur. Encore une fois, je vais revenir à mon style ou à mon fichier CS. Donc, comme vous pouvez le voir, si j'applique 30 % de couleur foncée à cette couleur de base, cela renvoie ce type de couleur De même, si j'applique 70 % puis que je configure ce fichier, vous pouvez voir la différence. Maintenant, il y a encore dix couleurs foncées. Je vous montre deux degrés car c'est la couleur d'origine et c' est la partie foncée de cette C'est le cas d'utilisation de Dark in Function. Notre fonction suivante est la fonction d'allégement . Laisse-moi te montrer. Donc, d'abord, je vais dupliquer cette ligne et commenter la précédente. Et là, je vais associer Lighten. Et je vais passer une valeur de 30 % ici. Si je définis ce fichier, comme vous pouvez le voir, il éclaircit la couleur de 30 % par rapport à notre couleur de base Si je vous montre mon fichier CSS, comme vous pouvez le voir, il est écrit en blanc pur car notre couleur rose est déjà une couleur plus claire Si j'utilise la couleur bleue, laissez-moi vous montrer la couleur de base bleue. Dans ce fichier, vous pouvez maintenant voir la partie lumineuse de cette couleur bleue. Et si je vous montre le fichier CSS, vous pouvez voir le code coloré. Nous pouvons utiliser ces fonctions avec Hova Effects. Parlons de notre prochaine fonction, qui consiste à ajuster la teinte. abord, je vais dupliquer cette ligne et commenter la précédente, et ici je vais taper adjust Hue. Teinte. Si j'ai configuré ce fichier, comme vous pouvez le voir, il a changé de couleur. En gros, en utilisant cette fonction, quelle que soit la couleur que nous passons dans notre premier paramètre, elle peut renvoyer une partie assombrie ou éclaircir une partie de cette couleur en fonction de cette Et dans notre deuxième paramètre, nous devons transmettre la valeur avec le degré. Si je passe 20 ici, puis que je configure ce fichier, vous pouvez voir la différence. Son retour n'assombrira pas le précédent. Si je passe les 70 degrés, voyons ce qui se passe. Si je définis ce fichier, il renvoie une partie plus claire de cette couleur. En utilisant la fonction H, nous pouvons faire pivoter les couleurs. Comme vous pouvez le voir, comment nous pouvons utiliser la fonction Hu. Parlons de notre prochaine fonction, qui est la saturation. Dans un premier temps, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais taper saturate. En gros, cette fonction augmente la luminosité de cette couleur. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il renvoie toujours la même couleur. Changeons la couleur. Ici, je vais utiliser une couleur marron. Je vais fournir une valeur hexadécimale qui a AD 4038. Si j'ai configuré ce fichier, vous pouvez maintenant voir la différence de couleur. Il s'agit de la couleur de base et celle-ci est saturée à 70 % de la couleur de base. Il augmente la luminosité de cette couleur brune et renvoie la couleur rouge. De même, nous avons une fonction opposée, qui est désaturée. Laisse-moi te montrer. Je vais dupliquer cette ligne et commenter précédente. Ici, je vais taper désaturate Je vais également changer la couleur de base, qui est le bleu. Si je définis ce fichier, comme vous pouvez le voir, cette fonction réduit la luminosité de cette couleur et renvoie cette couleur. fonction saturée augmente toujours la luminosité de cette couleur et la fonction de désaturation diminue toujours la luminosité de cette Si nous réduisons la valeur de 20 %, puis que nous définissons ce fichier, il essaie maintenant de correspondre à la couleur de base. Mais si vous augmentez la valeur de 90 % et définissez ce fichier, vous pouvez maintenant voir la différence. Cela a réduit la luminosité de cette couleur. Mais si je passe une valeur nulle et que je définis ce fichier. Maintenant, vous pouvez voir qu'est écrite la couleur d'origine, la couleur de base, la couleur bleue. Mais si j'utilise la valeur totale, 100% et que je définis ce fichier, maintenant vous ne pouvez voir que la couleur grise d'Itrton Parlons maintenant de notre prochaine fonction, qui est le mix. Je voudrais oblitérer cette ligne et commenter la précédente. Alors voilà, je vais taper mix. Grâce à cette fonction, nous pouvons mélanger différentes couleurs. Dans cette fonction, nous devons essentiellement passer trois paramètres au total. Donc, avec la couleur de base, je veux ajouter, comme vous pouvez le voir, notre couleur de base est le bleu. Je veux ajouter de la couleur rouge. Ici, je vais taper du rouge, une virgule, puis nous devons transmettre la valeur en pourcentage Donc, ici, je vais passer les 50 %. Cela signifie la quantité de bleu que je veux ajouter à la couleur rouge. Si je place ce fichier, comme vous pouvez le voir, il est écrit en violet. Si nous mélangeons la couleur rouge et la couleur bleue, dans ce cas, elle redevient violette je diminue la valeur du pourcentage de 20 %, puis que je définis ce fichier, vous pouvez maintenant le voir revenir en rose rougeâtre Il a appliqué 20 % de couleur ouest à cette couleur rouge. Si j'augmente la valeur 90 % puis que je définis ce fichier, vous pouvez maintenant voir le résultat différent. Maintenant, vous pouvez voir que notre nouvelle couleur est beaucoup plus forte que le rouge et qu'elle est écrite presque en bleu. C'est ainsi que vous pouvez utiliser la fonction mixte. Parlons maintenant de notre fonction de luxure, qui est une matrice transparente. Je vais dupliquer cette ligne, et je vais commenter la précédente. Ici, je vais taper des liens transparents en arrière-plan. En gros, en utilisant cette fonction, nous pouvons rendre notre couleur transparente. Si vous connaissez déjà le CSS, vous connaissez la valeur GVA, et A signifie Alpha Val, et nous pouvons rendre notre couleur transparente en utilisant la valeur Alpha De même, nous avons une fonction dans SAS, qui est transparente, oui. Ici, nous devons passer par les deux paramètres, la couleur et la valeur. Pour la couleur, je vais utiliser notre couleur de base, et ici nous devons passer la valeur 0-1 Donc, tapez Hemo zéro point, quatre, je veux dire, c'est 40 % transparent Configurons le fichier et voyons s' il fonctionne correctement ou non. Comme vous pouvez le constater, notre couleur de fond est transparente à 40 % . Et si je vous montre mon fichier CSS, ici vous pouvez le voir utiliser valeur Rgvia, ici vous pouvez voir qu'il est écrit en valeur Alpha 0,6 Et si je veux que ce soit complètement transparent, dans ce cas, nous devons passer la valeur 1. Si j'ai configuré ce fichier, vous pouvez maintenant voir qu'il est complètement transparent. Mais si je vous montre mon fichier CSS et que je le compare à la valeur Alpha, vous pouvez voir ici qu'il est écrit zéro. En CSS pour une transparence totale, nous devons utiliser zéro, mais en SAS pour une transparence totale, nous devons en utiliser un. De toute évidence, cela ne fonctionne que pour cette fonction. C'est tout pour ce tutoriel. J'espère que vous comprenez maintenant ce que sont les fonctions de couleur CS. Merci d'avoir regardé cette vidéo. Dans notre prochain tutoriel, nous aborderons les fonctions de CS List. Restez donc à l'affût pour notre prochaine vidéo. 17. Tutoriel des fonctions de liste Sass Part1: Bonjour, les gars, c'est bon de vous revoir. Une fois de plus, je suis de retour avec un nouveau tutoriel passionnant sur les fonctions SAS. Et dans ce tutoriel, nous allons apprendre les fonctions SSList Comme je vous l'ai dit plus tôt, nous devons six fonctions dans SAS, une fonction numérique, une fonction de chaîne, une fonction de couleur, une fonction de liste, une fonction de sélection et une fonction d'introspection Dans ce tutoriel, nous allons apprendre la fonction de liste. Ce sont toutes des fonctions. Mais avant de comprendre ce qu'est une liste. Si vous connaissez JavaScript, vous connaissez déjà les tableaux tableau signifie que dans une seule variable, nous pouvons stocker plusieurs valeurs. Et si vous voulez faire la même chose dans SAS, nous avons List. Ici, vous pouvez voir que nous prenons d'abord une variable puis une liste, et à l'intérieur de cette variable, nous définissons pour indiquer trois valeurs, cinq pixels, dix pixels et 15 pixels. Il s'agit de la première méthode que vous pouvez créer en dernier dans SAS. Je vais vous montrer cette deuxième méthode. Ici, vous pouvez utiliser un séparateur entre les valeurs. Vous pouvez utiliser une virgule Vous pouvez donc utiliser des valeurs sans virgule. Sinon, vous pouvez utiliser une valeur avec une virgule. Et il existe un autre moyen de créer une liste dans CAS. Laisse-moi te montrer. Vous pouvez également utiliser des adresses carrées pour créer une liste dans CS. Et maintenant je vais vous montrer les fonctions de la liste. En utilisant la fonction de liste, vous pouvez manipuler votre liste. Vous pouvez ajouter une nouvelle valeur à votre liste. Sinon, vous pouvez supprimer une valeur de cette liste. Vous pouvez faire beaucoup de choses en utilisant ces fonctions. Notre première fonction est la fonction de longueur. De là vient la Nème fonction. Ensuite, fonction Seth N, fonction join, appNFunction, fonction, fonction d' index, fonction du moindre séparateur, et notre dernière fonction est une fonction entre crochets Nous avons donc le total de la ligne la moins fonctionnelle dans CS et je vais aborder tout cela dans ce didacticiel. Sans perdre votre temps, c'est commencer par la pratique et voir comment ça marche. Enfin, je suis dans un studio de codage visuel. côte, j'ouvre le stylet cs et le fichier style point css Dans un premier temps, je vais créer une liste de noms de variables Dollar ist. Ensuite, deux points ici, je vais définir quelques valeurs. Cinq pixels, espace, dix pixels, espace, 15 pixels. Puis un point-virgule deux dans cette ligne. Maintenant, je vais créer une classe point class one, puis dans l'alirass je vais appeler une propriété CSS. Ici , Ici , je vais utiliser toutes les fonctions de liste une par une Appelons notre première fonction de liste, qui est la longueur. Ici, je vais taper la longueur. En utilisant la fonction de longueur, nous pouvons compter le nombre total de valeurs dans notre liste. Si je passe la variable am dollar list et que je définis ce fichier, comme vous pouvez le voir, il est écrit « bourrer trois parce que nous devons indiquer trois valeurs dans notre liste Si j'augmente la valeur de 20 pixels puis que je définis ce fichier, comme vous pouvez le voir, il est écrit quatre. Comme vous pouvez le constater, il compte plusieurs valeurs. De plus, si je supprime le pixel unitaire, laissez-moi vous le montrer puis définir ce fichier. Comme vous pouvez le voir, il est écrit quatre parce que cette fonction est suffisamment intelligente pour identifier les valeurs. C'est pourquoi sans unité, il peut compter nos valeurs. Et si j'utilise une virgule entre eux puis que je définis ce fichier, comme vous pouvez le voir, maintenant il est également écrit quatre parce que nous pouvons créer notre liste en utilisant l'espace sinon en utilisant une virgule Revenons à la position précédente. Je vais appuyer sur Ctrl Z. De plus, nous pouvons transmettre propriétés et des valeurs dans la fonction de longueur Laisse-moi te montrer. Tout d'abord, je vais utiliser des bretelles rondes À l'intérieur des accolades rondes, je vais d'abord utiliser avec une propriété de dix pixels Je vais également utiliser la propriété de hauteur. Hauteur, cinq pixels. Si je définis ce fichier, comme vous pouvez le voir, il réaccorde deux car nous passons deux valeurs totales dans cette fonction, largeur et hauteur Cette fonction est assez incorrecte pour identifier ces valeurs. Il s'agit de notre fonction de longueur qui peut compter les valeurs de nos listes. Parlons maintenant de notre prochaine fonction, qui est NIT. Mais d'abord, je vais dupliquer cette ligne et commenter précédente. Je vais taper NI. En gros, nous passons à deux paramètres dans la fonction N. Dans notre premier paramètre, nous devons transmettre la valeur de la liste et dans notre second paramètre, nous devons transmettre l' index. Laisse-moi te montrer. Dans notre premier paramètre, je vais transmettre la liste Dollar list. Et dans notre deuxième paramètre, je vais transmettre le numéro d'index, donc je vais en transmettre deux. Si je définis ce fichier, comme vous pouvez le voir, il est écrit en dix pixels. Maintenant, le quotien est la raison pour laquelle il est écrit dix pixels. Parce que comme vous pouvez le voir dans ma liste à l'index deux, nous avons une valeur de dix pixels. C'est pourquoi il est écrit dix pixels. Nous devons indiquer quatre valeurs dans ma liste. Cela signifie que nous devons indiquer quatre index dans cette liste. Dans notre deuxième paramètre, si je passe le numéro d'index, en fonction du numéro d'index, il renvoie la valeur. De même, si je change le numéro d'index, quatre, puis que je définis ce fichier, vous pouvez maintenant le voir renvoyer 20. Non seulement cela, nous pouvons également transmettre une valeur négative. Si je passe moins un puis que je définis ce fichier, vous pouvez maintenant le voir renvoyer 20 une fois de plus. Mais la question est de savoir pourquoi ? Parce que du côté gauche, on compte les valeurs positives. Dans le cas contraire, nous comptons les valeurs négatives à partir du côté droit. C'est donc notre moins un, c'est moins deux, c'est moins trois, et c'est moins quatre. Si je passe moins trois et que je place ce fichier, vous pouvez voir qu'il est écrit dix. Nous pouvons donc imprimer la valeur de cette façon, sinon de cette façon. Parlons maintenant de notre prochaine fonction, qui est de la configurer. Je voudrais commencer cette ligne et commenter la précédente. Si vous souhaitez ajouter une nouvelle valeur à notre liste existante, vous pouvez dans ce cas utiliser la fonction Seth Neh. Ici, je vais taper Seth Ne set nth. À l'intérieur des presses, nous devons passer trois paramètres. D'abord, notre liste, puis le numéro d'index, où souhaitez-vous vous placer ? Je veux le mettre à l'index deux. C'est pourquoi j'en passe deux. Dans notre troisième paramètre, nous devons transmettre la nouvelle valeur, et notre nouvelle valeur est 30 EM. Ici, je veux remplacer dix pixels par 30 heures. Si je configure ce fichier, vous pouvez voir le résultat. Cinq pixels, 30 am, 15 pixels, 20 pixels. À l'aide de cette fonction, vous pouvez remplacer une valeur de votre liste existante. Comme vous pouvez passer une valeur négative ici. Si je passe moins un puis que je configure ce fichier, vous pouvez maintenant le voir remplacé par 20 pixels par 30 heures. Parlons de notre quatrième fonction, Joan. Je vais dupliquer cette ligne et commenter la précédente. Ici, je vais appeler Joan Function. En utilisant la fonction conjointe, nous pouvons joindre plusieurs listes et créer une seule liste. Pour cela, je vais créer une autre variable, qui est deux. Je vais également modifier ces différents pixels, 50 pixels, 100 pixels, 150 pixels et 200 pixels Ici, nous devons passer le paramètre dollar deux, Liste un et Liste deux, Dollar, ist, virgule, et notre deuxième paramètre, nous devons passer notre deuxième liste est deux, dollar, est deux Donc, si je définis ce fichier, vous pouvez voir qu'il a écrit une nouvelle liste, et nous avons un total de huit valeurs dans cette liste. Cinq pixels, dix pixels, 15 pixels, 20 pixels, 50 pixels, 100 pixels, 150 pixels et 200 pixels. Vous pouvez voir qu'il n'y a pas de virgule entre ces valeurs. Fondamentalement, cette fonction s'est combinée pour créer une liste et a écrit une nouvelle liste. Mais quoi ? Si nous utilisons une virgule, dans notre première liste, laissez-moi vous montrer et dans notre deuxième liste, j'utilise simplement l'espace pour séparer les valeurs Si je définissais ce fichier, comme vous pouvez le voir dans notre nouvelle liste, il utilisait des virgules dans toute notre liste pour séparer les valeurs Nous pouvons également transmettre un autre paramètre dans notre fonction conjointe, qui est séparé. Supposons que je ne veuille pas de virgule entre ces valeurs. Dans ce cas, dans notre troisième paramètre, nous devons laisser passer de l'espace. Si je définis ce fichier, comme vous pouvez le voir dans notre nouvelle liste, il sépare notre valeur en utilisant un espace et non une virgule Comme vous pouvez utiliser la valeur automatique, il s'agit de la valeur par défaut. Je suis donc là pour taper auto. Si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'une virgule entre les valeurs Mais si je n'utilise pas de virgule dans notre première liste et que je définis ensuite ce fichier, par défaut, comme vous pouvez le voir, c'est de l'espace écrit Il sépare notre valeur en utilisant l'espace. Mais maintenant, je veux séparer cette valeur par une virgule. Dans ce cas, nous devons passer une virgule ici. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit des virgules entre les valeurs Notre troisième paramètre représente donc le séparateur. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons aborder une fonction stylo, une fonction zip, une fonction d'index, une fonction de séparation et une fonction entre crochets Merci donc d' avoir regardé cette vidéo, restez connectés pour nos prochains tutoriels. 18. Tutoriel des fonctions de liste Sass partie 2: Bonjour, les gars. Une fois de plus, je suis de retour dans mon coordinateur de studio visuel, et comme vous pouvez le voir, j'ouvre côte à côte le fichier de style SSPle et le fichier Stylo CSS Dans notre précédent didacticiel, nous allons en apprendre davantage sur la fonction Length, la fonction Nth, la fonction set N et la fonction de jointure Mais dans ce tutoriel, nous allons aborder les autres : la fonction APN, la fonction Z, la fonction d'index, la fonction séparation et sa fonction de crochet Donc, sans perdre votre temps, étudions de manière pratique. Dans un premier temps, je vais commencer par la fonction APN. Je vais donc configurer cette ligne et commenter la précédente. Et ici je vais taper Ajouter. Ensuite, nos cuivres ronds. Supposons que si vous souhaitez ajouter une nouvelle valeur dans la liste existante, dans ce cas, vous pouvez utiliser la fonction AVN. Supposons que dans notre première liste, je souhaite ajouter 30 pixels à 20 pixels. Dans ce cas, nous pouvons utiliser cette fonction. Laissez-moi vous montrer comment faire. Cette fonction ajoute une valeur unique. Dans notre premier paramètre, nous devons transmettre la liste, qui est une liste en dollars. Puis une virgule, puis nous devons transmettre la nouvelle valeur, qui est de 30 pixels Si je définis ce fichier, comme vous pouvez le voir dans le fichier CSS, il est écrit de 30 à 20 pixels. Cela ajoute une nouvelle valeur à notre liste. Nous pouvons ajouter une nouvelle valeur à l'aide de cette fonction. Nous avons également un troisième paramètre que nous pouvons utiliser séparément. Laisse-moi te montrer. Comme vous pouvez le voir, nos valeurs sont divisées par un espace Je vais donc utiliser ici notre troisième paramètre, qui est une virgule Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que nos valeurs sont séparées par. Vous pouvez utiliser n'importe quelle valeur ici, auto , espace. Parlons de notre prochaine fonction, qui est la fonction Z. Je vais passer à cette ligne et commenter la précédente. abord, je vais inventer celle-ci et je vais taper Z. En gros, cette fonction va joindre deux valeurs Je veux dire qu'il avait cinq pixels avec 50 pixels, dix pixels avec 100 pixels, 15 pixels avec 150 pixels et 20 pixels avec 200 pixels. Ici, je vais passer deux paramètres. Notre premier paramètre est la liste des dollars, et notre deuxième paramètre est le dollar égal à deux. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il combinait cinq pixels avec 50 pixels, dix pixels avec 100 pixels, 15 pixels avec 150 pixels, 20 pixels avec 200 pixels. Permettez-moi de vous montrer un bon exemple à cet égard. Ici, je vais prendre un nom de couleur. Dans les presses rondes, je vais prendre le rouge, le vert et le bleu. Je vais également prendre une autre liste. Si les ronders sont pour le rouge, je vais en prendre 120 Pour le vert, je vais utiliser 255, et pour le bleu, je vais en utiliser 70. Si je définis ce fichier, vous pouvez maintenant voir que la valeur de la couleur rouge est 120, valeur de la couleur verte est 255 et la valeur de la couleur bleue est 70. C'est le bon cas d'utilisation de la fonction zip. Si vous n'utilisez pas de virgule à des fins de séparation, laissez-moi vous le montrer. Je vais donc révoquer cette virgule et utiliser de l' espace Dans ce cas, vous pouvez retirer les bretelles rondes. Si j'ai défini ce fichier, comme vous pouvez le voir, il a également parfaitement fonctionné. Tout dépend donc de vous, que vous soyez l'aise avec le séparateur ou non. Vous pouvez utiliser une virgule ou un espace Web. Parlons de notre septième fonction, qui est l'indice. Je vais vous demander cette phrase et commenter la précédente. Et ici je vais taper index. Supposons que vous souhaitiez effectuer une recherche dans votre liste. Dans ce cas, vous pouvez utiliser la fonction d'index. Donc, en tant que paramètre, nous devons d'abord fournir le nom de la liste, et le nom de notre liste est dollar list. Dans notre deuxième paramètre, nous devons passer le mot clé, que je veux trouver. Je veux trouver 15 pixels. Si je définis ce fichier, comme vous pouvez le voir, c'est un numéro d'index écrit. J'ai trouvé notre mot-clé à l'index trois. Si je retire l'unité puis que je recherche le fichier, comme vous pouvez le voir, il est également écrit trois. Mais si j'essaie de trouver un résultat qui n'existe pas dans cette liste, laissez-moi vous en montrer 40 puis définir ce fichier. Comme vous pouvez le voir, rien n'est écrit. Si cela existe, c'est écrit, sinon rien n'est écrit. Parlons maintenant de notre huitième fonction, qui est son séparateur. Je vais donc dupliquer cette ligne et commenter la précédente, et ici je vais taper List separator. Séparateur de listes. Le séparateur de liste renvoie essentiellement le nom du séparateur. Ici, nous devons transmettre le nom de la liste, puis il retournera le séparateur que nous utilisons dans cette liste. Je vais faire passer une liste de dollars. Si je définis ce fichier, comme vous pouvez le voir, c'est de l'espace écrit. Donc, ici, vous pouvez voir dans notre liste une, que nous utilisons l'espace pour séparer nos valeurs. Mais si j'utilise le virgule dans notre liste deux, et que nous passons ici la liste deux, puis que nous définissons ce fichier. Vous pouvez maintenant voir son titre car ici nous utilisons des virgules pour séparer nos valeurs Il faut distinguer deux types de séparateurs, sinon l'espace. Je vais maintenant parler de notre dernière fonction, qui est entre crochets Je vais donc dupliquer cette ligne et commenter la précédente. Et ici, je vais taper si entre crochets est entre crochets. En gros, cette fonction revient à la valeur. C'est vrai ou faux. Il s'agit essentiellement de vérifier si nous utilisons le carré *** dans notre liste ou non ? Ici, je vais passer le nom de notre liste, Dollar list. Si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'un faux résultat écrit. Mais si j'utilise aussi le carré*** dans notre liste, laissez-moi vous le montrer puis le transmettre, et si je passe deux dans cette fonction et que je définis ce fichier, comme vous pouvez le voir, c'est écrit vrai. En gros, nous utilisons cette fonction avec la condition, et nous allons en apprendre davantage dans nos prochains tutoriels. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons apprendre certaines fonctions. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 19. Tutoriel sur les fonctions de sélection de SAS partie 1: Bonjour, les gars, c'est bon de vous voir. Une fois de plus, nous sommes de retour avec un nouveau tutoriel lié à SAS. Et dans ce didacticiel, nous allons apprendre les fonctions du sélecteur SAS Mais avant de comprendre ce qui est sélectionné. Ici, vous pouvez voir l'intérieur de la classe 1, nous avons ncatag, nous avons dit bonjour et nous avons dit bonjour, et nous avons notre balise Anca, qui se trouve dans cette classe Notre étiquette Anca est notre sélecteur. Mais SAS fournit des fonctions invitées qui peuvent manipuler nos sélecteurs Permettez-moi de vous montrer la fonction. Comme vous pouvez le constater, nous avons sept fonctions de sélection dans CS, le sélecteur suivant, le sélecteur ajouté, le remplacement du sélecteur est super sélectionné, les sélecteurs simples, les sélecteurs unifiés et le sélecteur Nous allons de l'avant et commençons nos travaux pratiques. Ici, vous pouvez voir que j' ouvre déjà mon application Kuala, et côte à côte, j'ouvre fichier CS stylé et un fichier de style CSS Effacons d'abord une variable dans notre fichier CS. Dollar et le nom de notre variable sont sélectionnés. Puis le côlon. Dans un premier temps, je vais vous montrer à quoi sert la fonction Selector Nest Ici, je vais taper Selector List. En gros, dans cette fonction de nidification de sélecteur, nous passons au total deux paramètres, et les deux paramètres doivent être sélecteurs Pour notre premier paramètre, je vais prendre des codes doubles pour notre premier paramètre, je vais utiliser L et pour notre deuxième paramètre, je vais utiliser I puis Semgoron deux dans cette ligne En gros, cette fonction de sélection va créer notre premier paramètre parentag et faire de notre deuxième paramètre une balise enfant de notre premier Je tiens à dire que cela va créer un tag UL, parentag et un tag LI child tag Il va combiner à la fois le tag et créer une sélection. Pour l'appliquer, nous devons créer une classe. Pour cela, je vais utiliser la méthode d'interpolation. Donc, d'abord, je vais taper has tag et dans les alias, je vais utiliser notre variable, qui est sélecteur, sélecteur de dollars Donc, quelle que soit la valeur que nous avons dans la variable sélectionnée, elle va la coller ici. Dans cette fonction sélective, je vais utiliser une propriété. Vous pouvez utiliser n'importe quelle propriété. Pour l'instant, je vais utiliser la hauteur. Hauteur : pixel de teinte. Définissons le fichier et voyons ce que nous obtenons dans notre fichier CSS. Si je définis ce fichier, vous pouvez voir ici dans le fichier CSS qu'il crée UltaGparnTag et Litag child Il combinait à la fois le sélecteur et le sélecteur combiné Made. En gros, il s'agit de l'utilisation de la fonction Selector Nest. Permettez-moi de vous montrer un autre exemple de cette fonction. Je vais supprimer celui-ci et définir ce double code. Je vais suivre le cours Totter Two. Notre première classe est XYZ et notre deuxième classe est point ABC. Et maintenant je vais prendre notre deuxième paramètre. Je veux utiliser une virgule et entrer dans le code de la tour. Notre deuxième paramètre est le tag P. Si je définis ce fichier, vous pouvez le voir ici dans mon fichier CSS de style, ici vous pouvez le voir créer deux groupes de classes différents abord, il sélectionne notre balise de paragraphe, qui se trouve dans notre classe XYZ, puis il sélectionne une autre balise de paragraphe, qui se trouve dans la classe ABC Si vous souhaitez utiliser la classe sudo, oui, vous le pouvez. Laisse-moi te montrer. Tout d'abord, je vais supprimer cette classe, et je vais utiliser uniquement la classe XYZ Ensuite, dans notre deuxième section de paramètres, je vais taper N person, colon, notre Psotoelector, qui est Hober colon, notre Psotoelector, Si je définis cette ligne, vous pouvez voir ici qu'elle utilise le sélecteur Ober avec la classe XYZ Ici, vous pouvez voir si vous souhaitez ajouter deux paramètres Pour cela, vous devez utiliser N person sine. Permettez-moi de clarifier cette section une fois de plus. Supposons qu'avec XYZ, je souhaite ajouter le trait de soulignement ABC. Permettez-moi de vous montrer alors de prononcer : « Personne ne souligne ABC ». Si je définis ce fichier, vous pouvez voir ici qu'il crée une nouvelle classe XYZ underscore ADC C'était notre première fonction qui est Selectnnst. Parlons d' une autre fonction qui est le sélecteur apène Ici, je vais supprimer SelectOnNst et je vais taper selector apin De même, dans cette fonction, nous devons passer aux deux paramètres. Et cette fonction appen va combiner ces deux paramètres Laisse-moi te montrer. Dans notre premier paramètre, je vais utiliser la balise de paragraphe. Dans notre deuxième paramètre, je vais utiliser une classe. Ici, je vais taper le point ABC. fonction Selector Nest fournit essentiellement de l'espace entre deux paramètres Mais dans la fonction d'ajout, elle combinera les deux paramètres Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il n'y a pas d'espace entre le tag P et la classe ABC. Je tiens à dire que cela crée une sélection unique. Cela signifie que toutes les balises de paragraphe avec la classe ABC doivent avoir une hauteur de 20 pixels. Permettez-moi de vous donner un autre exemple. Supposons que je vais utiliser la classe point XY Z. Dans notre deuxième paramètre, je vais utiliser le soulignement Copy Si je définis ce fichier, comme vous pouvez le voir, il crée une nouvelle classe, XYZ undersco copy Dans notre fonction précédente, nous devons utiliser N person sinus pour joindre ces deux paramètres. Mais dans cette fonction, nous n'avons pas besoin d' utiliser person sine. Maintenant, permettez-moi de modifier ce sélecteur et de passer à l'étape suivante. Super copie, je vais utiliser Coma, et ici je vais taper underscoimage Comme vous pouvez le constater, dans notre deuxième paramètre, nous utilisons deux noms différents, copy undisco copy et underscoimage Tu peux prendre n'importe quel nom comme tu veux. je définis ce fichier, comme vous pouvez le voir, il crée au total deux sélecteurs différents, copie de soulignement XYZ et une image de soulignement En gros, il combine notre premier paramètre avec la copie, et encore une fois, il combine notre premier paramètre avec l'image et crée deux sélecteurs différents C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir les sélecteurs restants Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 20. Tutoriel sur les fonctions de sélection de SAS partie 2: Bonjour, les gars. C'est bon de te revoir. Encore une fois, nous sommes dans l'éditeur de code de mon studio vidéo, et comme vous pouvez le voir, côte à côte, j'ouvre le fichier style point cs et le fichier stylet CSS Dans ce didacticiel, nous allons continuer avec la fonction de sélection. Je vais commencer ce tutoriel avec sélecteur RiplesFunction. Laisse-moi te montrer. Pour cela, je vais taper le sélecteur tiret place. C'est compréhensible d'après le nom lui-même, cela remplacera quelque chose. Dans cette fonction, nous passons essentiellement trois paramètres au total. Supposons que dans notre premier paramètre, je passe le point C XYZ C'est le nom de notre classe. Dans le deuxième paramètre, nous devons passer celui que nous devons remplacer. Supposons que je veuille remplacer la classe point XYZ. Ici, je vais attacher le point XYZ. Maintenant, dans notre troisième paramètre, nous devons transmettre la nouvelle valeur, et ici vous devez transmettre la valeur par laquelle vous souhaitez remplacer. Je veux remplacer point yate par point ABC. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le voir, il n'y a pas de nom de classe c point XYZ. Il remplace point yate par point ABC. C'est pourquoi il a dépassé le point c ABC. Permettez-moi de vous donner un autre exemple. S'il n'y a pas de classe H one, H un dans notre premier paramètre, dans ce cas, si je définis ce fichier, comme vous pouvez le voir, il ne remplace pas le point XYZ par ABC Il s'agit simplement d'imprimer le point C XYZ car cette fonction de réponse ne trouve pas H un dans notre premier paramètre C'est pourquoi il imprime des ADT. Ce sont les utilisations de la fonction Selector Repres. Parlons de notre prochaine fonction de sélection, qui est le super sélecteur E. Ici, je vais attacher son sursélecteur de tiret. En gros, nous utilisons le sélecteur à des fins de test, non à des fins de modification, et il n'est écrit qu'un seul avec l'une ou l'autre des chutes, et pour le comprendre, nous devons passer par les deux paramètres Dans notre premier paramètre, nous devons passer un sélecteur, mais nous appelons notre premier sélecteur superselector Supposons que notre super sélecteur soit A, et que nous appelions notre deuxième sous-sélecteur de paramètres Et dans notre sous-sélecteur, je vais passer un point, et je vais également définir une classe X Y Z. Si je définis ce fichier, il retournera vrai Mais pourquoi le quotien ? Parce que cette fonction va rechercher notre super sélecteur dans notre sous-sélecteur Si un sursélecteur existe dans notre sous-sélecteur, dans ce cas, c'est Définissons ce fichier. Comme vous pouvez le voir, c'est écrit dans l'air. En gros, nous utilisons cette fonction avec une condition IP. Mais si je remplace leur poste, à XYZ. Si je supprime XY de notre sous-sélecteur et que je définis ce fichier, comme vous pouvez le voir, il est écrit tombe car ce super sélecteur n' existe pas dans ce sous-sélecteur C'est pour ça que c'est écrit Falls. Il s'agit de l'utilisation du super sélecteur. Parlons de notre prochain sélecteur, qui est un sélecteur simple Je vais supprimer celui-ci et je vais taper un simple sélecteur de tiret Grâce à cette fonction de sélection, nous pouvons diviser nos sélecteurs Si nous passons le sélecteur combiné ici, cela divisera les sélecteurs. Laisse-moi te montrer. Supposons que je passe par ABC. Si je définis ce fichier, vous pouvez le voir ici diviser nos sélecteurs Il crée un sélecteur A et un autre point de sélection ABC. Il s'agit de l'utilisation d'un sélecteur simple. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder les fonctions de sélection restantes, Selector Unify et Selector Extend Merci d'avoir regardé cette vidéo, Stu pour notre prochain tutoriel 21. Tutoriel sur les fonctions de sélection de Sass partie 3: Bonjour, les gars. C'est bon de te revoir. Il s'agit de notre troisième tutoriel, relatif à la fonction de sélection Sas Dans ce didacticiel, nous allons apprendre à sélectionner Unify et la fonction d'étendue du sélecteur Passons à l'éditeur de code Visual Studio et voyons comment utiliser cette fonction. Dans un premier temps, je vais appeler la fonction Unifi sélectionnée, sélecteur Dans cette fonction, nous devons passer deux paramètres au total. Supposons que dans notre premier paramètre, j'utilise la balise d'ancrage, et dans notre second paramètre, j'utilise les informations par points. En gros, cette fonction essaie de créer une correspondance entre les deux paramètres. Si je définis ce fichier, comme vous pouvez le voir, cela crée une correspondance et crée un nouveau sélecteur, à info Permettez-moi de vous montrer d'autres exemples liés à cette fonction. Supposons que dans notre premier paramètre, je vais taper ad active. Et dans notre deuxième paramètre, je vais passer à l'info. Si je définis ce fichier, comme vous pouvez le voir, il crée un nouveau sélecteur, adt active point info qui signifie qu'il va sélectionner la balise d'ancrage avec Active Plus, sinon la classe info. Ensuite, il va appliquer le CSS. Mais si je passe à un autre sélecteur, laissez-moi vous montrer la balise d'ancrage dans notre premier paramètre et la balise H une dans notre deuxième paramètre Si je définis ce fichier, comme vous pouvez le voir, il est écrit en flèche car il n'a créé aucune combinaison entre deux paramètres. Il s'agit de l'utilisation de la fonction Unify. Parlons de notre dernière fonction de sélection, qui est Selector Extend Je vais supprimer le sélecteur Unify et ici je dois taper extend Cette fonction fonctionne également comme la fonction unifiée sélectionnée. En gros, cette fonction essaie d'étendre une classe et de créer un nouveau sélecteur Et dans cette fonction, nous pouvons utiliser un total de trois paramètres. Supposons que notre premier paramètre soit l'information sur le point d'ancrage, et que dans notre second paramètre, je transmette la balise Anger. R, et dans notre troisième paramètre, je vais transmettre un lien point de classe. Donc, cette fonction essaie de faire correspondre le deuxième paramètre à notre premier paramètre. S'ils ont trouvé une correspondance, il imprime l'IA, puis il essaie de créer une combinaison avec le point de classe de liens. Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord une combinaison dans info. qui signifie qu'il s'imprime tel car il a trouvé une étiquette de colère dans notre premier paramètre. C'est pourquoi il imprime Asit, puis il crée une combinaison point d'information point L. Il s'agit d'un autre sélecteur Cette fonction crée toujours une combinaison étrange. Permettez-moi de vous donner un autre exemple. Maintenant, dans notre deuxième paramètre, je vais passer H une balise, et dans notre troisième paramètre, je vais passer H deux balises. Si je définis ce fichier, comme vous pouvez le voir, il imprime notre premier paramètre tel quel, et il n'essaie pas d' étendre notre sélecteur Parce qu'il n'a trouvé aucune correspondance dans notre deuxième paramètre. C'est pourquoi il ne peut pas étendre notre sélecteur. Fondamentalement, nous n'utilisons pas cette fonction de sélection complexe dans notre projet, et la plupart du temps, nous utilisons la fonction selecto next, sélecteur APenFunction et la fonction selector repress et C'est tout pour ce tutoriel. Dans notre prochain didacticiel, nous allons démarrer les fonctions cartographiques. Merci d'avoir regardé cette vidéo, restez à l'affût de notre prochain tutoriel. 22. Tutoriel sur les fonctions de carte Sass: Bonjour, les gars. C'est bon de te voir. Encore une fois, je suis de retour avec un nouveau tutoriel lié à ce tutoriel, et dans ce tutoriel, nous allons apprendre le fonctionnement des cartes. Essayons d'abord de comprendre ce qu'est une carte. Dans notre précédent tutoriel, nous allons découvrir la fonction de liste. Voici un exemple de fonction de liste. Comme vous pouvez le voir, dans une variable, nous disons un total de trois pixels el, dix, 20 et 30 pixels. Comme vous le savez, nous pouvons stocker plusieurs valeurs dans la fonction de liste. De même, dans notre fonction cartographique, nous pouvons stocker plusieurs val. Mais le processus est différent. Laisse-moi te montrer. Comme vous pouvez le voir, il s'agit d'un exemple de fonction cartographique et nous disons ici un total de deux valeurs, 405 cents. Mais il y a une autre valeur dans les codes inversés. L'un est régulier et l'autre est moyen. Ce sont des clés. Ce sont des clés cartographiques et des valeurs. La valeur normale moyenne est de 400 et la valeur moyenne est de 500. Comme vous le savez, dans notre liste, nous avons un index. Par exemple, notre indice à dix valeurs est un, l' indice à 20 valeurs est deux, indice à 30 valeurs est trois. En utilisant l'index, nous pouvons spécifier la position de ce v. En utilisant leur position, vous pouvez obtenir les valeurs. Si vous souhaitez extraire la troisième valeur d'index, elle renvoie 30 pixels. Mais dans les cartes, nous n'utilisons pas d'index. Ici, nous utilisons des clés. Ici, nous pouvons définir un nom différent pour nos clés. Il s'agit d'un autre exemple. Ici, vous pouvez voir que nous utilisons le nom de couleur vert et que pour le vert, nous utilisons la valeur x disial De même, pour le bleu, utilisez une valeur décimale hexadécimale. Également une fonction sur notre carte, similaire à la liste. Et il a également une fonction non virale. Ici, vous pouvez voir nous avons six fonctions cartographiques différentes : porte cartographique, fusion de cartes, suppression de cartes, clés de carte, valeurs cartographiques, et la dernière est la carte a. Nous allons aborder tout cela un par un. Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le constater, j' ouvre déjà mon application Kuala. Maintenant, vous pouvez voir côte à côte, j'ouvre un fichier de style CS et un fichier de style CSS. Au début, je vais créer une variable et le nom de notre variable est font to it, dollar, font wait. Puis le côlon. Une fois que deux points ont été pressés à l'intérieur des rondes, je vais d'abord créer notre clé et notre première touche sera normale. Avec cela, je vais passer notre première valeur et notre première valeur est 400. Ensuite, je vais créer notre deuxième clé, qui est moyenne. De plus, notre valeur est 500 et notre dernière clé est en gras. Et la valeur est de 700. Puis Semgram jusqu'à cette ligne. Voici notre carte, et maintenant je vais utiliser cette carte. Pour cela, je vais créer une classe dot taste. Ensuite, dans la liste, je vais utiliser un corps CSS qui est une police Poids de police. Je vais maintenant appeler notre première fonction cartographique, qui est Map Gate. Ensuite, à l'intérieur des robes rondes, nous devons passer le nom de notre carte et le nom de la clé. Comme vous pouvez le constater, le nom de notre carte est Font Weight. Ici, je vais transmettre le poids de la police. Dans notre deuxième paramètre, nous devons passer la clé et pour la clé, je vais passer bool Dans le cadre du double parcours, je vais passer en gras. Si je définis ce fichier, comme vous pouvez le voir, notre police est 700. Dans la fonction Mp gate, nous devons passer aux deux paramètres, le nom de la carte FontUo et la clé Cette fonction écrit toujours la valeur de cette clé, comme vous le savez, notre valeur de clé mondiale est 700. Mais que se passe-t-il si je passe une clé différente qui n'existe pas dans cette fonction cartographique ? Ici, je vais passer des os. Si je définis ce fichier, comme vous pouvez le voir, il n'est rien écrit car il n'y a pas de noms de clés. Si la clé existe, alors la fonction map gate est écrite b. Maintenant, parlons de notre fonction suivante, qui est map Key. Ici, je vais taper la clé de la carte. Dans la fonction Mp keys, nous devons passer à un seul paramètre, uniquement le nom de la carte. Si je définis ce fichier, comme vous pouvez le voir, toutes les clés de cette carte sont écrites. Notre première touche est normale, ou la deuxième clé est moyenne, et notre troisième touche est en gras. Il s'agit de l'utilisation de la fonction Mapey. Le nom de toutes les clés est écrit. Parlons de notre prochaine fonction, qui est map ils. Alors voilà, je vais passer ls. C'est aussi une fonction de touche cartographique semblable à un mot. Si je définis ce fichier, comme vous pouvez le voir, il renvoie toutes les valeurs. Et ici, nous n'avons besoin de passer qu' un seul paramètre, comme les clés. C'est tout pour ce tutoriel. Dans notre prochain didacticiel, je vais aborder les fonctions restantes, à savoir la fusion de cartes, la suppression de cartes et la clé de hachage de carte Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 23. Tutoriel sur les fonctions de carte Sass partie 2: C'est bon de vous voir, les gars. Dans ce didacticiel, nous allons aborder les fonctions cartographiques restantes, à savoir la fusion de cartes, la suppression de cartes et le haski de cartes Revenons à l'éditeur de code de Visor Studio. Enfin, nous sommes dans l'éditeur de code Visu Studio, et nous allons commencer par la fonction de fusion de cartes Cette fonction va fusionner pour différencier une carte et renvoyer une carte. Nous devons donc créer une autre carte. Pour cela, je vais prendre une variable, et le nom de notre variable est léger. Poids. Après le point-virgule, vous avez dit les robes rondes, notre premier kinome est le plus léger, notre valeur est 100 et notre deuxième kinome est li et la valeur est 300 et le point-virgule Je vais maintenant utiliser la fonction de fusion de cartes. Ici, je vais taper map merge. Et si je passe un autre paramètre, comme vous le savez, dans cette fonction, nous devons passer aux deux paramètres. Ici, je vais passer un autre paramètre, qui est une autre carte, c'est-à-dire le poids. Je copie le nom de la variable et je vais le coller ici. Mais il n'y a aucun problème. Si je définis ce fichier, il renverra une flèche. Laisse-moi te montrer. Si je définis ce fichier, comme vous pouvez le voir, il est écrit en forme de flèche car la fonction de fusion de cartes renvoie un nouvel homme, pas une valeur. C'est pourquoi nous ne pouvons pas l' imprimer directement sous forme de valeur. Nous devons créer une nouvelle variable pour stocker cette nouvelle carte. Laisse-moi te montrer. Je vais créer une fusion de noms de variables. Et maintenant je vais appeler cette fonction. Je vais supprimer cette fonction de cet endroit, et je vais la coller ici. En gros, cette fonction a fusionné avec des cartes et a écrit une nouvelle carte, et maintenant je vais appeler MapKisFunction Ici, je vais taper les clés de la carte. Et ici, nous devons passer notre nouveau Mug variable. Voilà, je vais passer Mug. Si je configure ce fichier, comme vous pouvez le voir, il renvoie toutes les clés de notre nouvelle carte. Comme vous pouvez le constater, il imprime d'abord format moyen en gras normal du recto sur la carte humide, puis il imprime la plus claire et la plus claire de la carte claire sur la carte humide. Il s'agit de l'utilisation de la fonction map Merch. Parlons de notre prochaine fonction, qui est la suppression de cartes. Nous ne pouvons pas appeler directement la fonction de suppression de carte. De même, nous devons créer des variables, donc je vais dupliquer cette ligne, et je vais changer le nom de la variable. Thèmve. Et ici, je vais appeler map remove function, map, remove. Dans cette fonction, nous devons passer deux paramètres au total. Dans notre premier paramètre, nous devons transmettre le nom de la carte. Dans notre cas, il s'agit de la police, mais dans notre deuxième paramètre, nous devons transmettre le nom de la clé. Quelle clé je souhaite supprimer ? Supposons que je veuille supprimer la touche en gras. Alors là, je vais faire une cravate audacieuse. Et si j'appelle notre nouvelle variable remove dans notre sélecteur de test, puis que je place ce fichier, comme vous pouvez le voir, utilisez uniquement les touches normale et moyenne Je supprime la touche en gras. Voici donc l'utilisation de la fonction de suppression. En gros, nous transmettons le nom de la clé que nous voulons supprimer. Parlons maintenant de notre dernière fonction, qui est la clé de hachage de la carte Donc ici, je vais taper la clé de hachage de la carte. En gros, le retour de cette fonction au type de valeur devient soit vrai. Dans cette fonction, nous devons passer aux deux paramètres. Donc, comme premier paramètre, je vais transmettre le poids des polices, et comme deuxième paramètre, nous devons transmettre le kiname. Je vais passer la touche en gras Si la touche Bol existe dans notre carte de polices, elle est écrite vraie Configurons donc le fichier. Comme vous pouvez le voir, c'est écrit vrai. Mais si je passe un mauvais nom de clé, plus en gras puis que je place ce fichier, comme vous pouvez le voir, il est écrit faux Il s'agit donc de l'utilisation de la fonction de hachage de la carte. Voilà pour ce tutoriel. Dans notre prochain tutoriel, nous allons apprendre cette fonction d' introspection. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 24. Tutoriel sur les fonctions d'introspection Sass: Bonjour les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre la fonction d'introspection SAS Nous en savons déjà plus sur la fonction numérique, la fonction de chaîne, la fonction de couleur, la fonction de liste, sélection, la fonction de carte Dans ce tutoriel, nous allons aborder la fonction d' introspection. Voyons combien de fonctions nous avons dans la fonction d' introspection. Comme vous pouvez le constater, nous avons au total six fonctions dans l'introspection Fondamentalement, la fonction utilise des conditions. Et c'est toujours une valeur booléenne écrite à la suite d' autres échecs Commençons par l' aspect pratique et essayons de comprendre comment nous pouvons utiliser ces fonctions. Ici, vous pouvez voir que nous sommes dans éditeur de code Visual Studio et côte à côte, j'ouvre le fichier style point cs et le fichier style point css. Comme vous pouvez le voir dans notre fichier CSS à points de style, nous créons déjà une variable num, une variable char, une variable de liste, une variable de carte. Avec cela, nous créons un mélange dans le rayon de la bordure des noms. Créez également un nom de fonction sum. Comme vous pouvez le voir dans notre variable num, nous économisons 15 pixels et dans notre variable char, nous enregistrons un flux, roboto Dans notre variable de liste, nous créons une liste en utilisant des valeurs multiples, 15 pixels, 25 pixels, 30 pixels, et dans notre variable de carte, nous créons une carte. Dans un premier temps, je vais créer une classe dans laquelle je vais vérifier notre fonction d' introstection point taste Dans le cali resis, je vais utiliser une propriété CSS, qui est Tout d'abord, je vais commencer par la fonction variable exist. Ici, je vais taper variable exist, et ici nous devons transmettre le nom de la variable. En gros, nous utilisons cette fonction avec des conditions p et c'est toujours vrai ou faux Cette fonction va vérifier si le nom de la variable existe dans ce fichier, puis elle va renvoyer true. Dans le cas contraire, la valeur renvoyée sera fausse. Vérifions la variable. Ici, je vais transmettre le nom du dollar ou de la variable is map. Si je définis ce fichier, vous pouvez voir, oups, nous devons supprimer le signe du dollar , puis définir ce fichier Maintenant, vous pouvez voir que c'est écrit vrai. Si je passe une valeur qui n' existe pas dans notre fichier, dans ce cas, laissez-moi vous montrer des cartes, puis définir ce fichier, comme vous pouvez le voir, il est écrit faux. Permettez-moi de vous montrer une chose. Comme vous pouvez le constater, nous vérifions notre variable cartographique. Mais si je coupe cette variable de carte à cet endroit et que je la colle dans ce sélecteur, puis que je définis ce fichier, comme vous pouvez le voir, il renvoie également vrai car si les variables existent n'importe où dans notre fichier, dans ce cas, elles retourneront vrai Il s'agit de notre variable globale, mais maintenant la carte est notre variable locale. Passons à une autre fonction qui est variable globale exist. Laisse-moi te montrer. Ici, je vais taper la variable globale exist. Si je définis ce fichier, il renverra false. Laisse-moi te montrer. Comme vous pouvez le voir, c'est écrit faux, mais vous pouvez voir notre variable cartographique existe dans notre fichier. Alors quel est le problème ? Parce que notre variable cartographique n'est plus une variable globale. C'est maintenant une variable locale. Désormais, nos variables globales sont la variable num, variable char et la variable list. Si je passe num ici puis que je définis ce fichier, comme vous pouvez le voir, il est maintenant écrit vrai. Passons maintenant une autre fonction qui est mix in exist. Ici, je vais taper mix in exist. Dans cette fonction, nous devons transmettre un nom de mixage. Ici, je vais copier le nom du mixage du rayon de bordure, et je vais le coller ici. Si j'ai configuré ce fichier, comme vous pouvez le voir, c'est écrit vrai. Mais si je supprime le rayon puis que je définis ce fichier, comme vous pouvez le voir, c'est écrit des chutes. De même, nous avons une autre fonction qui est function exist. Si la fonction existe dans notre fichier, dans ce cas, elle renverra true. Fonction Si je passe le nom de la fonction et que le nom de notre fonction est sum puis que je définis ce fichier, comme vous pouvez le voir, c'est écrit vrai. Passons à notre cinquième fonction, qui est le type off. Ici, je vais taper un conseil. Dans cette fonction, nous passons essentiellement un membre variable. Ici, nous devons transmettre la variable lime. Par erreur, j'ai configuré ce fichier, c'est pourquoi il est écrit sur cette erreur et notre variable lime est dollar list. Si je passe cette variable et que je définis ce fichier, comme vous pouvez le voir, il est écrit notre type de variable, qui est liste. De même, si je passe variable char limb puis que je définis ce fichier, vous pouvez le voir ici écrit sous forme de chaîne. Notre type de variable char est une chaîne de caractères. Cette fonction est toujours écrite en type variable. Passons maintenant à notre dernière variable qui est en jeu. Ici, je vais taper spat. Je ne trouve aucune utilisation appropriée de cette fonction car elle est imprimée comme Vail Si je configure ce fichier, vous pouvez le voir ici sur Roboto. Nous ne l'utilisons qu'à des fins d'inspection. Si je passe le dernier ici et que je configure ensuite ce fichier, comme vous pouvez le voir, il s' imprime le moins tel quel. Je pense que ce n'est pas une fonction très importante. C'est tout pour ce tutoriel. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 25. Tutoriel de la directive Sass @contenu :: Bonjour les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS Dans ce tutoriel, nous allons apprendre les directives relatives au contenu du SAS. Nous avons déjà découvert le mixage SAS dans nos précédents tutoriels. En mélangeant, nous pouvons créer un cône réutilisable. Nous pouvons l'utiliser comme fonctions. Comme vous pouvez le voir, nous créons un mixage nommé BDI radius, et à la place du mixage, comme vous pouvez le voir, nous utilisons différentes propriétés pour différents navigateurs Ici, nous utilisons un préfixe. Pour Chrome, nous utilisons une clé Web. Pour Mozilla, nous utilisons mose, puis j'utilise le rayon de bordure réel de la propriété Comme vous pouvez le voir, nous définissons également la valeur. Chaque fois que nous devons appeler le mixage dans notre sélecteur, nous devons passer la valeur en paramètre Par conséquent, dans notre fichier CSS, il est écrit comme ceci. Rayon de bordure de cinq pixels. À partir de là, nous pouvons transmettre plusieurs valeurs. Mais à partir de là, nous ne pouvons transmettre aucune propriété CSS. Supposons que je veuille définir le style de bordure en utilisant ce mixage, mais cela n'est pas possible et pour résoudre ce problème, SAS a introduit des voyages directs de contenu. En gros, nous l'utilisons pour envoyer des données supplémentaires sans mélanger les valeurs. Je tiens à dire qu'avec cette valeur, nous pouvons envoyer des données supplémentaires. Permettez-moi de vous montrer l'exemple. Comme vous pouvez le constater, nous utilisons le même mixage, mais ici nous utilisons des directives de contenu. Pour cela, nous devons taper au contenu rouge. Quoi que nous adoptions , l'intégrer à ces VLT est le moyen d'envoyer des données à cette directive Comme vous pouvez le voir, nous appelons notre rayon de bordure de mixage et nous définissons une valeur de cinq pixels. Ensuite, nous utilisons des tiss dans les caliss dont nous avons besoin pour transmettre les valeurs de directive Border style Il s'agit de nos données relatives aux directives relatives au contenu. Si je définis ce fichier, il renverra ce code CSS. Après le rayon de bordure, il définit les jours de style de bordure. Comme vous pouvez le voir, il transmet nos données supplémentaires après le rayon de la frontière. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, nous sommes dans l'éditeur Leo Cod de mon utilisateur, et côte à côte, j'ouvre Stylod CS et le fichier CSS Styload J'ai déjà créé un mixage nommé border radius, BD radius. Et aussi, j'appelle cela le mixage dans notre sélecteur. Et ici, vous pouvez voir le résultat dans notre fichier CSS. Et maintenant, je veux envoyer des données supplémentaires avec ce mixage, car nous devons utiliser Cali Races Et ici, je vais passer le style de bordure, donc le type, bordure, le style de bordure, dst Comme vous pouvez le constater, nous envoyons des données supplémentaires grâce à ce mixage. Mais si vous souhaitez imprimer les données supplémentaires lors du mixage, vous devez pour cela utiliser les directives de contenu. Pour cela, nous devons taper au contenu rouge. Si je configure ce fichier, comme vous pouvez le voir, maintenant c'est print boda style dans, nous envoyons les données supplémentaires via les directives de contenu Nous pouvons maintenant envoyer plusieurs propriétés grâce à ce mélange. Permettez-moi de vous donner un autre exemple. Cette fois, je vais envoyer un sélecteur complet via ces directives de contenu Pour cela, je vais commenter toutes les lignes. Ici, je vais créer un nouveau mix à la vitesse de mixage . Notre nom de mixage est taste. À l'intérieur du calicis, je vais utiliser uniquement des directives de contenu, ajoutant le taux Pour utiliser ce mélange, je vais taper include, ajouter le taux, inclure notre nom de mixage est taste. Ensuite, à l'intérieur du calicis, je vais d'abord prendre un sélecteur et le nom que nous avons sélectionné est Classe 1, puis à l'intérieur du Cali Resist, je vais utiliser une couleur appropriée. Couleur y : comme vous pouvez le voir ici, en utilisant ce mélange, nous allons passer le sélecteur complet avec les propriétés Si je définis cette valeur, comme vous pouvez le voir, cela crée une classe point classe un et dans cette classe un, vous définissez une couleur de propriété. Et pour exécuter ce contenu supplémentaire, nous utilisons des directives de contenu. Permettez-moi de vous montrer un autre exemple façon dont nous pouvons utiliser les directives de contenu. Supposons que notre sélecteur de classe 1 se trouve dans l'ID one, pour envoyer ce contenu dans l'ID, nous pouvons l'utiliser de cette façon. Laisse-moi te montrer. Je veux définir un IDH DAG et notre nom d'identification est men. Ensuite, à l'intérieur de la résine de Cali, je vais faire passer ce contenant Je vais couper ce contenu et le coller ici. Si je définis ce fichier, comme vous pouvez le voir, il affiche le contenu de la directive dans l'ID du menu. C'est pourquoi il imprime d'abord le menu. Nous pouvons également utiliser les directives de contenu de cette manière. Maintenant, le menu devient le sélecteur parent et la classe 1 devient le sélecteur enfant Permettez-moi de vous montrer un autre exemple d'utilisation des directives de contenu. Je vais commenter ces lignes. Dans un premier temps, je vais créer un bouton de sélection de boutons à points. Ensuite, dans l'alyss, je vais d'abord utiliser la propriété border Bordure d'un pixel. Je vais utiliser une bordure unie, fils, et je veux une couleur de bordure. Dans le même temps, je souhaite créer un sélecteur Hober pour ce bouton Ici, je vais parler de mixage , mais je ne le crée pas. Au rouge, incluez. Include et notre nom de mixage est Hober. Ce sont les alias, je vais définir bordure par bordure par bordure de deux pixels Je vais maintenant créer le nom de mixage Her. Ici, je vais taper sur le mixage rouge. Mixage en survol. Ensuite, à l'intérieur des étalonnages, je vais créer un sélecteur Posito pour notre classe Pour cela, nous devons utiliser la colonne Person Sign in Person Hoger Ensuite, à l'intérieur des calices, je vais transmettre le contenu au rythme du contenu Nous utilisons ce signe de personne car nous devons créer le sélecteur Her à l'aide d'un bouton Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord un sélecteur de boutons, puis il crée un sélecteur de boutons, et Boden avec nos données de contenu supplémentaires C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons en apprendre davantage à ce sujet . Merci d' avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 26. Tutoriel de directive Sass @contenu 2: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel relatif aux directives de contenu. Comme vous pouvez le voir, nous sommes déjà dans mon éditeur de code Visual Studio, côte à côte, j'ouvre Style lot, le fichier cs et le fichier CSS Styllod La plupart du temps, nous utilisons des directives de contenu avec Media Query. Permettez-moi de vous montrer un exemple avec une requête multimédia. Pour cela, je vais commenter tous les codes précédents, et ici je vais prendre un body tag. Ensuite, à l'intérieur de l'alyss, je veux définir une couleur de fond Contexte. Fond gris. Maintenant, je vais créer trois requêtes média différentes. Sur l'écran multimédia rouge, et à l'intérieur des versets ronds, je vais utiliser MaxWPPTY max W Je veux régler un maximum de 1 300 pixels. Ensuite, dans les alias, je vais passer un sélecteur et le nom de notre sélecteur Je vais utiliser le même sélecteur et la même propriété. C'est pourquoi je vais copier cette section et la coller dans les alias ici, je vais définir la couleur de fond rouge Ainsi, lorsque notre résolution d'écran correspond à cette requête multimédia, elle définit notre couleur d' arrière-plan en rouge, et maintenant je vais créer deux autres requêtes multimédia pour une résolution différente. Je vais donc dupliquer cette section, et ici je vais définir 1 000 pixels. Je veux dire couleur de fond bleu. Bleue. Ainsi, à 1 000 pixels couronne du Brésil a défini notre couleur de fond en bleu Encore une fois, je vais définir une autre requête multimédia. Je vais donc dupliquer cette portion, et ici je vais dire 800. À 800 pixels, je veux dire couleur de fond verte. Ici, je vais taper en vert. Il s'agit d'une méthode CSS normale. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le voir dans notre fichier CSS, il s'imprime tel quel, mais maintenant je vais utiliser les directives de contenu pour le quadrage multimédia. Pour utiliser les directives de contenu, nous devons créer un mix in. Dans un premier temps, je vais créer un mixage au taux de mixage. Je souhaite utiliser ce mix pour l'écran multimédia. C'est pourquoi je vais définir le nom du média de mixage. Ensuite, à l'intérieur des robes rondes, je vais passer un paramètre, et notre variable de paramètre est weep Dans les alorss, je vais transmettre ce code, écran multimédia Copiez ce code et je vais le coller ici. Ici, je vais passer à la variable. Dollar. Ensuite, dans les calibres je vais utiliser des directives de contenu, au taux contenu Puis le point-virgule deux sur cette ligne. Si vous souhaitez utiliser ce mixage, vous devez l'inclure. Mais d'abord, je vais commenter les lignes, les requêtes des médias. Je n'en ai pas besoin maintenant. Maintenant, je vais inclure ce mixage avec Include QR, au tarif inclus. Et le nom de notre mixage est media. Ensuite, entre parenthèses, nous devons transmettre la valeur Comme vous pouvez le constater, notre premier maximum est de 1 300 pixels. Ici, je vais passer 1 300 px. Ensuite, dans les calibrages, je vais transmettre ici notre contenu supplémentaire pour les directives de contenu Notre première sélection est Body. À l'intérieur du Calibrass, je veux dire « arrière-plan ». Contexte. Tarif. Comme vous pouvez le constater, nous utilisons total de trois résolutions d'écran multimédia, 1 300 pixels, 1 000 pixels et 800 pixels Je souhaite dupliquer cette section deux fois. Ici, je veux passer 1 000 pixels. À 1 000 pixels, je veux dire que c'est la couleur de fond bleu. Bleue. Dans notre dernier capital de Meteor, je veux dépasser 800 Value Max avec 800 et ici je veux définir la couleur de fond verte. Si je définis ce fichier, comme vous pouvez le voir, il repose sur le même résultat. J'imprime tel quel. Mais cette fois, nous n'avons pas besoin d'utiliser plusieurs fois le mot de requête multimédia. Nous transmettons notre contenu par le biais de directives de contenu, et nous créons déjà un mixage pour les requêtes multimédia. Dans la section Inclure, vous pouvez modifier la taille de l'écran. Supposons que je passe à 700 pixels. Si je définis ce fichier, comme vous pouvez le voir, il définit notre requête multimédia de 700 pixels. Non seulement cela, vous pouvez transmettre plusieurs propriétés. Laisse-moi te montrer. Avec le contexte, je veux dire bordure. Bordure de deux pixels. Solide. Et la couleur de notre bordure est le blanc. Je vais configurer ce fichier, et vous pouvez voir le résultat ici. Maintenant à 700 pixels, il définit notre couleur de fond en vert. Il définit également une bordure unie de couleur blanche. Il s'agit de la meilleure utilisation des directives relatives au contenu. J'espère que c'est clair pour toi maintenant. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 27. Tutoriel sur les directives Sass @media: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec le nouveau tutoriel lié à SAS. Dans ce tutoriel, nous allons apprendre SAS Media et les directives AT True. Essayons de comprendre ce que sont les directives relatives aux médias. Ici, vous pouvez voir une classe nommée container, et nous disons conteneur de 1 100 pixels et nous centrons notre conteneur en utilisant la marge Si nous créons mediaquery en utilisant CSS, dans ce cas, nous devons utiliser mediaquery Vous pouvez le voir, nous avons défini un point d'arrêt à 1 150 pixels et dans cette requête multimédia, nous avons défini une largeur de conteneur de 900 Lorsque la largeur du navigateur atteint 1 150 pixels, il doit réduire la largeur de notre conteneur de 1 100 pixels à 900 pixels Comme vous le savez, dans un souci de réactivité, nous devons créer plusieurs points d'arrêt pour différentes tailles d'écran Vous devez créer de nombreuses requêtes multimédias. De plus, nous devons saisir la largeur du conteneur à chaque fois. Inutilement, nous devons définir la largeur du conteneur plusieurs fois. Pour résoudre ce type de problème, il est recommandé d' introduire des directives sur les médias. En utilisant la directive sur les médias, nous pouvons gérer cette situation. Voyons donc comment nous pouvons l'utiliser et réduire nos lignes inutiles. Comme vous pouvez le voir, nous sommes enfin dans mon éditeur de code Visual Studio, et côte à côte, j'ouvre style point CS et le fichier style point CSS. J'ouvre déjà mon répertoire CSS dans notre application Koala. Donc, d'abord, je vais créer une classe, et le nom de notre classe est container. Ensuite, à l'intérieur de la résine Cali, je vais définir le conteneur par semaine de 1 100 pixels Je vais également définir Margin. Marge, je veux centrer le conteneur, donc je vais utiliser zéro pixel. De plus, je vais utiliser Auto vile et maintenant je veux définir une requête multimédia différente pour différents points d'arrêt, mais nous allons taper moins de code dans cessation Dans les alias, je vais créer la monnaie multimédia au tarif média Écran multimédia, et dans le cadre du processus du tour, je vais définir le point d'arrêt Je vais taper un trait d' union maximal de 1 150 pixels. C'est donc notre premier point de rupture. Donc, à une largeur de 1 150 pixels, je souhaite réduire la largeur du conteneur Pour cela, nous n'avons pas besoin de taper à nouveau container, nous devons taper avec propriété. Largeur 900 pixels. Comme vous pouvez le voir, elle consomme de la méthamphétamine De même, je vais créer deux autres points de rupture. Je vais donc consulter cette section deux fois. Ici, je vais régler le maximum avec 950 pixels. À une largeur de navigateur de 950 pixels, je souhaite définir une largeur de conteneur de 700 pixels. Comme vous pouvez le constater, nous n'avons pas besoin d' utiliser le sélecteur de conteneur en permanence. De même, à une largeur de 700 pixels, je souhaite définir un conteneur de 500 pixels. En gros, vous pouvez voir dans mon fichier CS nous travaillons avec un seul sélecteur Mais si je définis ce fichier, comme vous pouvez le voir, cela crée au total quatre sélecteurs différents Comme vous pouvez le constater, notre premier sélecteur est notre conteneur, et les trois autres sélecteurs sont nos Dans SAS, si nous utilisons at media à l'intérieur de la section conteneur, nous l'appelons media direct names. Ici, vous pouvez voir la différence. Dans notre fichier CSS, chaque fois que vous entrez dans l'écran multimédia, sélecteur de conteneur est créé Ensuite, à l'intérieur du sélecteur de poursuite, il ajuste le conteneur we Mais dans notre fichier cs, si nous utilisons des directives média, nous n'avons pas besoin d'utiliser le sélecteur continu encore et encore. Il s'agit de l'utilisation des directives relatives aux médias. Essayons de comprendre nos prochaines directives, qui sont les directives root. Dans nos précédents didacticiels, nous allons en apprendre davantage sur l'imbrication SAS Et ici vous pouvez voir l'exemple de la nidification. Comme vous pouvez le constater, il y a une classe pour parents à l'intérieur de la fenêtre réservée aux parents, nous avons une classe pour enfants, et nous avons également une classe pour sous-enfants et une étiquette découpée. Comme vous pouvez le voir dans notre balise parent, nous avons défini 1 100 pixels, dans notre balise enfant nous avons défini la couleur rouge, et dans notre balise sous-enfant, nous avons défini la couleur rose Si je compile ce fichier, il va renvoyer ce code CSS. Comme vous pouvez le voir, il crée au total trois sélecteurs parent-sélecteur parent et sélecteur enfant différents , il crée également un sélecteur parent-enfant et un sélecteur sous-enfant Comme vous pouvez le constater, il est inutile de créer une balise parent dans notre fichier CSS Mais je ne veux pas que les parents soient sélectionnés à chaque fois. Nous pouvons le supprimer en utilisant SAS. Pour résoudre ce problème, SAS a introduit les équipes directes à la racine. Dans le prochain tutoriel, nous allons apprendre comment nous pouvons l'utiliser dans la pratique. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 28. Tutoriel sur les directives Sass @at root: C'est bon de vous voir. Dans ce tutoriel, nous allons apprendre à la racine les directives. Comme vous pouvez le voir, côte à côte, j'ai ouvert le fichier style point CS et le fichier style point CSS. Dans un premier temps, je vais créer un groupe de nidification. Au début, je vais prendre un point de classe parent et le nom de notre classe parent est IM. Ensuite, dans les versets de Cali, je vais utiliser la propriété CSS et nom de notre propriété CSS est coloré, coloré en vert Ensuite, dans cette classe parent, je vais créer une autre classe. Je souhaite créer une sous-classe et le nom de notre sous-classe est élément par élément rappeur. Ensuite, dans le caliss, je vais utiliser la propriété CSS et notre propriété CSS est Couleur rouge. Ensuite, je vais utiliser un autre sélecteur dans emballage de notre article, qui est Image à l'intérieur des coraux que je vais prendre avec la propriété, nous, nous, Ensuite, en dehors de cet emballage, je vais suivre un autre cours Je souhaite créer une autre sous-classe de cet article, et le nom de notre sélecteur est point item child Ensuite, dans la classe je vais utiliser un arrière-plan de propriété CSS Fond rose. Si je place ce fichier, comme vous pouvez le voir, il est automatiquement créé sur le quatrième sélecteur Notre premier sélecteur est pour notre article, notre deuxième pour l'emballage de l' article et notre troisième pour l'image, qui se trouve à l'intérieur Notre dernier sélecteur est l'article Child Select. Maintenant, si vous remarquez que vous pouvez le voir, c'est du verre répété à chaque fois. Vous décidez maintenant que vous ne voulez pas de classe d'objet pour cette partie, pour l'objet rappeur et pour notre image. Pour résoudre ce problème, SRS introduit des directives à la racine Vous devez taper ici les directives root. Ici, je vais taper le rouge sur Troop. Ensuite, je lance Calibass nous devons fermer cette classe après le tag image Ici, je vais fermer le cis , puis je vais définir ce fichier. Comme vous pouvez le voir dans mon fichier CSS, il supprime un élément de notre sélecteur Ici, vous pouvez voir qu'il n' y a aucun élément de nom de classe. Il s'agit d'un article imprimé, d' un article ou d'une image, mais dans notre sélecteur américain, vous pouvez à nouveau voir la classe d' article Il s'agit de l'utilisation des directives à la racine. En gros, ce sont des noms de sélecteurs inutiles. J'espère que tu as compris. Permettez-moi de vous montrer un autre exemple de directives à la racine. Pour cela, je vais commenter cette section, je vais configurer ce fichier. Dans un premier temps, je vais passer d'un média à un média publicitaire, le nom de notre média est print. Ensuite, à l'intérieur du Caliss, je vais prendre un objet à points de classe Lepper Ensuite, à l'intérieur du calis, je vais prendre un autre sélecteur, et le nom de notre sélection Ensuite, à l'intérieur des calices, je vais utiliser la propriété CSS et notre propriété CSS est color, color read Si je configure ce fichier, vous pouvez le voir imprimer nos médias. Et à l'intérieur de cette impression, vous sélectionnez article par article. Ensuite, à l'intérieur du caliss, il imprime la couleur rouge. Mais si vous le remarquez, vous pouvez voir qu'il n'y a aucune propriété CSS dans notre classe d'emballage d' éléments Cette propriété provient de la classe d'éléments, mais elle permet également de sélectionner ce sélecteur, l'emballage d'articles Mais je ne veux pas ce sélecteur d'emballage d' articles. Si nous voulons supprimer cette classe d'emballage d'éléments, nous devons utiliser les directives at root. Laisse-moi te montrer. Après l'emballage de l'article, nous devons taper les directives rouges à la racine Ensuite, nous devons démarrer notre Calibase nous devons également mettre fin à ce Calibase par la suite Si je définis ce fichier, comme vous pouvez le voir, il supprime le rappeur d'éléments et maintenant il ne sélectionne que la classe d'éléments. Comme vous pouvez le voir, sélectionnez directement le sélecteur d'articles. Il ignore le sélecteur d'élément, ce qui est totalement inutile car il n'y a aucune propriété CSS dans la classe d'emballage d'élément J'espère que c'est maintenant clair pour lui. Une chose dont vous devez vous souvenir, car les directives sont prédéfinies et nous l'appelons « sans ». Permettez-moi de vous montrer l' exemple de son fonctionnement. Dans un premier temps, je vais supprimer ces lignes, emballage de l'article. Ensuite, dans l'impression multimédia , je vais suivre un cours et le nom de notre classe est container. Et à l'intérieur du Cliivess , je vais prendre 22 propriétés Notre première propriété est de 130 pixels. De plus, je vais prendre une autre propriété colorée, lue en couleur. Nous créons cette thèse à des fins d'impression. Si quelqu'un essaie d'imprimer la page, elle imprimera notre conteneur avec 130 pixels et une lecture en couleur. Mais sur notre site web actuel, je ne veux pas cette couleur et nous. Pour cela, je vais utiliser ici nos directives at root. À la lecture à la racine. À l'intérieur des calices je vais utiliser les mêmes propriétés Mais ici, je vais changer les valeurs. Pour nous, je vais utiliser 100 pixels et pour la couleur, je vais utiliser le vert. Cela signifie que si quelqu'un essaie d'imprimer notre page Web, il doit renvoyer 130 pixels avec une couleur rouge. Mais sur notre site Web, cela passe par 100 pixels et par la couleur verte. Je vais maintenant utiliser la valeur prédéfinie des directives at root. À l'intérieur des robes rondes, je vais passer sans, sans et ici il faut passer une valeur nommée media. C'est méchant, cela fait également partie de la classe des conteneurs, mais sans support. Après avoir défini ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, notre presse écrite fonctionne jusqu'à présent, puis elle imprime sans support. Il s'agit du CSS de notre site Web et de notre CSS d'impression. J'espère que maintenant c'est clair pour vous dans le prochain tutoriel, nous allons apprendre les directives de contrôle. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel.