Share
Dans ce tutoriel, je vais vous expliquer un outil appelé Myth. Myth est un préprocesseur CSS alternatif qui, contrairement à Sass ou à LESS, n’utilise pas de syntaxe propriétaire. Au lieu de cela, Myth adopte la syntaxe CSS "future" telle que spécifiée dans le brouillon. Pensez au mythe comme au remplissage d'image qui nous permet d'utiliser le format HTML5
“Le CSS tel qu'il a été imaginé.
Avant de pouvoir utiliser Myth, nous devons d'abord configurer deux choses. Commençons!
Myth est un package Node.js qui lui permet de fonctionner sur différentes plates-formes. Vous devrez donc vous assurer que Node.js ainsi que NPM (Node Package Manager) sont installés sur votre système. Pour vérifier, lancez Terminal ou Invite de commande et tapez noeud -v && npm -v, comme suit:
Cela indique que Node.js et NPM sont installés.Cette commande doit renvoyer la version de Node.js et NPM comme indiqué ci-dessus, sinon vous devrez les installer avant de continuer. NPM a fourni un court screencast pour vous guider tout au long du processus. Vous pouvez également suivre notre série et nos cours précédents pour comprendre ce que Node.js est.
Maintenant, en supposant que Node.js et NPM soient configurés, vous pouvez commencer à installer Myth en utilisant la commande suivante:
npm install -g mythe
le -g paramètre que nous avons ajouté va installer la bibliothèque Myth globalement, qui permet à Myth d'être accessible n'importe où, dans n'importe quel répertoire de notre système.
Une fois cela fait, vous aurez accès au mythe commander. Fonctionnement mythe --version, par exemple, vous montrera la version actuelle de Myth installée sur votre système.
le 
Accentsconagua
mythe commande fonctionne.Myth fonctionne avec n'importe quelle extension de fichier textuelle. Les feuilles de style peuvent être définies dans .SMS, .css, ou même .mythe. Ici j'utilise simplement .css je n'aurai donc pas à configurer mon éditeur de code pour rendre le code avec les couleurs de coloration syntaxique appropriées.
Lancer la commande suivante, mythe --watch build / app.css app.css pour surveiller les changements dans la feuille de style dans la /construire dossier et le compiler dans un fichier correspondant.
La feuille de style sera compilée dans app.css dans le répertoire racine..Nous sommes tous prêts à utiliser le mythe!
Myth est essentiellement un préprocesseur CSS qui nous permet d’écrire une nouvelle syntaxe CSS (que nous pourrions espérer normaliser à l’avenir) en la compilant au format CSS compatible avec les navigateurs d’aujourd’hui. La prise en charge de Myth inclut l’utilisation de variables CSS, de la manipulation des couleurs CSS et de quelques techniques CSS actuellement ou partiellement non prises en charge, comme le :: espace réservé pseudo-classe et calc ().
L'utilisation de variables nous aide considérablement à maintenir les feuilles de style et est peut-être la principale raison pour laquelle les pré-processeurs CSS ont été si bien adoptés en premier lieu. Néanmoins, les variables entreront dans CSS en tant que fonctionnalité native. Selon le dernier brouillon, nous utiliserions un double tiret. -- définir une variable à la place de la var- préfixe indiqué dans un projet précédent:
: root / ** [version ancienne et obsolète] * / var-color-primary: # 000; var-color-secondary: #fff; / ** [dernière version] * / --color-primary: # 000; --couleur-secondaire: #fff;
le :racine Le sélecteur de pseudo-classe fait référence à l'élément racine du document de balisage. Dans le cas de HTML, cela fera référence à la élément, en SVG ce serait la . Étant donné que l’élément racine est le niveau le plus élevé d’un document, placer nos variables dans :racine leur permet d'être accessible dans toutes les règles de style de la feuille de style. Vous pouvez limiter la portée de la variable en déclarant dans un sélecteur plus spécifique.
Nous utilisons le nouveau var () fonction pour appliquer une variable dans une règle de style, par exemple:
: root --color-primary: # 000; --couleur-secondaire: #fff; h1, h2, h3 color: var (- couleur-secondaire); .panel background-color: var (- couleur-primaire); couleur: var (- couleur secondaire);
Cet exemple nous donnera le résultat suivant (comme vous l’auriez pu le penser):
h1, h2, h3 color: #fff; .panel background-color: # 000; couleur: #fff;
Les valeurs dans les variables peuvent être n'importe quoi - une couleur, une chaîne, une longueur, voire une opération mathématique utilisant le CSS calc () une fonction. Les valeurs de la variable peuvent également être réutilisées ou héritées conformément à la règle en cascade CSS. Ci-dessous, par exemple, nous déterminons la hauteur de la ligne valeur basée sur la variable précédente.
: root --font-size-base: 16px; --line-height-base: calc (16px + 10); p font-size: var (- font-size-base); line-height: var (- line-height-base);
Cela nous donne:
p taille de la police: 16px; hauteur de ligne: 26px;
Firefox est actuellement un navigateur qui prend en charge la variable CSS de façon native (la liste complète est disponible sur CanIUse.com)..
La fonction de manipulation des couleurs nous permet de modifier les couleurs de manière plus intuitive. il n'est pas nécessaire de mémoriser ou de jongler avec le sélecteur de couleurs uniquement pour sélectionner la couleur correcte. C’est une pratique courante avec les préprocesseurs CSS, mais Couleur() (partie du mod de couleur CSS niveau 4) nous permettra de modifier les couleurs en CSS simple. Cette nouvelle fonction fonctionne en spécifiant la couleur avec une soi-disant ajusteur de couleur:
element background-color: couleur ()
Les ajusteurs de couleurs pris en charge par Myth incluent:
légèreté(), modifier la légèreté de la couleur donnée.blancheur(), modifier l'intensité du blanc de la couleur donnée.noirceur(), semblable à blancheur(), sauf qu'il modifie l'intensité du noir.saturation(), modifier la saturation des couleursteinte() , produire une couleur plus claire en mélangeant la couleur donnée avec du blanc.ombre() , produire une couleur plus sombre en mélangeant la couleur donnée avec le noir.L'exemple suivant va alléger #ccc (gris foncé) de 20%.
p couleur: couleur (#ccc luminosité (20%));
… Qui compile en:
p couleur: rgb (51, 51, 51);
Alternativement, vous pouvez également passer la couleur à travers une variable, comme ceci, ce qui nous donnera le même résultat:
: root --color-primary: #ccc; p couleur: couleur (var (- couleur-primaire) luminosité (20%));
Couleur() est une fonction qui sera grandement utile lorsqu’elle est utilisée avec le CSS3 gradient linéaire pour déterminer les couleurs de dégradé, par exemple:
.bouton arrière-plan: dégradé linéaire (vers le bas, var (- couleur-primaire), couleur (var (- couleur-primaire) teinte (10%))); ;
le variante de police la propriété est quelque chose d'autre que nous pouvons utiliser dans Myth. variante de police est présent dans CSS depuis CSS1 avec seulement deux valeurs acceptées, Ordinaire et lettres minuscules. En CSS3, une partie du module de polices CSS, le variante de police propriété a été étendue avec davantage de valeurs acceptées ainsi que des ajouts de propriétés spécifiques tels que font-variant-est-asiatique cela nous permettra de sélectionner des variations de glyphes chinois, simplifié ou traditionnel.
Essayons de transformer toutes les lettres d'un titre en petites capitales:
h1 font-variante: toutes les petites capitales;
Myth compilera ce code dans:
p -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; variante de police: toutes les petites capitales;
le toutes petites capitales value forcera tous les caractères, y compris les minuscules et les majuscules, en petites majuscules. Cependant, gardez à l'esprit que toutes petites capitales Cela ne concerne que les familles de polices fournissant des versions à petit capital de chaque glyphe, telles que Helvetica, Arial et Lucida Grande. Lorsque les petites majuscules ne sont pas prises en charge, le glyphe renverra «inconnu»:
Courtoisie d'image: Typography.comFirefox est, pour le moment, le seul navigateur avec un support décent pour la variante de police propriété. Beaucoup de valeurs, sauf la lettres minuscules (présent depuis CSS1) échouera dans les autres navigateurs, y compris Chrome et Safari. (voir la liste complète de compatibilité dans CanIUse.com).
Myth inclut également Autoprefixer qui lui permet d’insérer des préfixes de navigateur pour des propriétés particulières. Rendez-vous sur le dépôt Github pour trouver plus de fonctionnalités CSS qu'il prend en charge. Il existe également un plugin pour Grunt et Gulp pour répondre à votre flux de travail.
Enfin, Myth est un préprocesseur CSS pour tous ceux qui vivent à la pointe du Web. Toutefois, que vous décidiez ou non d’utiliser Myth comme outil CSS classique, nous pouvons en conclure qu’il présente quelques nouvelles fonctionnalités CSS intéressantes qui feront du Web un meilleur endroit pour l’avenir..
