Utilisation de pré-processeurs CSS avec WordPress - Que sont-ils?

Je travaille avec WordPress depuis trois ans, mais ce n’est qu’il ya un an que je suis devenu sérieux au sujet du développement de WordPress. Plus précisément, je suis passionné par le thème des enfants et passe beaucoup de temps à développer des thèmes..

Au cours des deux dernières années, nous avons assisté à la montée en puissance des préprocesseurs CSS, principalement des outils facilitant la rédaction de feuilles de style et facilitant leur maintenance..

Dans cette série, nous allons examiner ce que sont les pré-processeurs, quels sont les plus populaires, et comment nous pouvons les intégrer dans le développement de nos thèmes..

Où sommes-nous dirigés

En ce qui concerne le développement d'interface utilisateur, il ne s'agit pas seulement de rendre les choses plus belles, mais aussi de rendre les choses bien structurées et aussi performantes que possible, et je pense que cela devrait être quelque chose qui passe dans nos projets WordPress. , ainsi que.

Dans cette série, je compte expliquer un peu ce que sont les pré-processeurs et souligner quelques-uns des principaux acteurs de la scène. Je vais aussi parler de certains des cadres les plus populaires. Je passerai ensuite à une plongée plus profonde dans LESS et expliquerai pourquoi je préfère l’utiliser. Enfin, je vais expliquer comment l'utiliser avec CodeKit pour compiler votre code CSS pour votre thème..

À propos des préprocesseurs CSS

Comme mentionné précédemment, il existe un certain nombre de pré-processeurs CSS, les plus utilisés étant LESS et SASS. Les deux sont syntaxiquement similaires et peuvent considérablement augmenter la vitesse à laquelle vous pouvez écrire votre CSS.

Il y a quelques différences comme leurs compilateurs et extensions ou frameworks avec lesquels ils peuvent être combinés.

MOINS

LESS est un langage de style dynamique. Vous pouvez écrire votre CSS par programmation dans un .Moins déposer et compiler votre sortie dans un .css fichier. Le langage de compilation de LESS est JavaScript. C’est très bien parce que vous pouvez exécuter le compilateur côté serveur ou côté client.

Certaines des fonctionnalités de LESS incluent:

Variables - Les variables peuvent être définies et sont utilisées dans tout votre fichier. Faites un changement à un endroit et voyez-le mis à jour partout où il est utilisé.
Mixins - Les mixins incluent un ensemble de propriétés d'un jeu de règles dans un autre jeu de règles. Vous pouvez également utiliser des mixins paramétriques acceptant des arguments..
Règles imbriquées - Les règles imbriquées vous permettent d’utiliser l’imbrication au lieu de, ou en combinaison avec la cascade..
Namespaces - Les espaces de noms vous permettent de regrouper vos variables ou vos mixins, à des fins d'organisation ou simplement pour offrir une encapsulation..

Je vais entrer dans plus de détails sur la syntaxe pour ceux-ci dans le prochain post de cette série.

Deux des frameworks front-end les plus populaires qui utilisent LESS sont:

Bootstrap
Sans cadre

TOUPET

SASS est une extension de CSS3. Il a deux syntaxes: .scss et .toupet. .SCSS est la syntaxe la plus courante mais prend également en charge l'ancienne syntaxe en retrait.

Certaines des fonctionnalités de SASS incluent:

Variables - Les variables peuvent être définies et sont utilisées dans tout votre fichier. Faites un changement à un endroit et voyez-le mis à jour partout où il est utilisé comme LESS.
Mixins - Les mixins vous permettent de réutiliser des morceaux entiers de CSS, des propriétés ou des sélecteurs comme LESS.
Imbrication - Évitez les répétitions en imbriquant les sélecteurs les uns dans les autres, comme LESS.
Héritage de sélecteur - Il peut dire à un sélecteur d'hériter de tous les styles d'un autre sans dupliquer les propriétés CSS. Non disponible dans MOINS.

Voici quelques cadres qui incluent SASS et SCSS:

Fondation
La gravité
Sans cadre

Conclusion

Les préprocesseurs CSS sont une tendance croissante dans la conception Web. Ils peuvent considérablement réduire le temps que vous passez à écrire des styles pour vos sites..

Ils peuvent également vous aider à structurer votre CSS comme vous le feriez dans d'autres langages comme PHP ou JavaScript. Si vous n'utilisez pas déjà de préprocesseurs CSS dans votre projet Web, vous devez absolument en tenir compte..

Maintenant que nous avons jeté un coup d'œil à deux des préprocesseurs les plus populaires, je vais plonger plus profondément dans LESS et donner quelques raisons pour lesquelles j'ai personnellement choisi de l'utiliser dans le prochain post. Je vais également vous montrer comment commencer à utiliser CodeKit avec vos projets WordPress.

Ressources

MOINS
TOUPET

Code